1、新建三个文件结构如下: 或者 你可以去下载我打包之后的文件 下载 然后把里面 除这三个文件外的文件删掉
webpack.config.js
var webpack=require('webpack');
//var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const BEFORE_PATH = path.join(__dirname, './script/'); // 输出前的路径
const BUILD_PATH = path.join(__dirname, './js/'); // 最后输出放置公共资源的目录
module.exports = {
devtool: false,//配置生成Source Maps,选择合适的选项
entry: {
main:BEFORE_PATH+"main.js"
},
output: {
path: BUILD_PATH,
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js|jsx$/, //是一个正则,代表js或者jsx后缀的文件要使用
loader: 'babel-loader',
query:{
presets:['es2015','react','stage-0'] //必须先安装babel-preset-es2015和babel-preset-react
}
},
{
test: /\.css$/,
loaders: ['style', 'css'], //必须先安装css-loader和style-loader
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: './build/img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: './build/fonts/[name].[hash:7].[ext]'
}
}
]
},
plugins:[
new webpack.DefinePlugin({ // <-- 减少 React 大小的关键
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(), //删除类似的重复代码
new webpack.optimize.UglifyJsPlugin(), //最小化一切
new webpack.optimize.AggressiveMergingPlugin()//合并块
]
};
index.html
无标题文档
script/main.js
// main.js
import React from 'react'
import { render } from 'react-dom'
render(
Hello, world!
,
document.getElementById('example')
);
/*
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
Hello, world!
,
document.getElementById('example')
);
*/
e:
cd E:\work\test\webpack\react-demo2-again
npm install webpack -g
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install webpack --save-dev
npm install webpack webpack-dev-server babel -g
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 expose-loader imports-loader script-loader jquery ajv --save-dev
npm install extract-text-webpack-plugin
npm install compression-webpack-plugin
npm install cnpm
cnpm install node-sass
cnpm install postcss-loader
cnpm install style-loader --save
cnpm install sass-loader
cnpm install css-loader --save
webpack
1、打开E盘
2、打开E盘里的 的项目目录 react-demo2-again
3、安装更新 webpack
4、下载淘宝镜像
5、用淘宝镜像安装webpack
6、安装babel 控件
7~9、加载各个loader
10-15、引入css sass依赖的
16、编译生成