一，为什么用webpack
1.由于项目中资源的多样性和依赖性
2.js模块规范复杂化
3.开发与线上文件不一致性
二、webpack 特性
1.对CommonJS、AMD、ES6语法兼容
2.对js、css、图片等资源文件都支持打包
3.有独立的配置文件webpack.config.js
5.可以将代码割成不同的chunk，实现按需加载，降低了初始化时间
6.支持SourceUrls 和 SourseMaps，易于调试
7.强大的Plugin接口，大多是内部插件，使用起来比较灵活
8.webpack 使用异步IO并具有多级缓存
9.串联式模块加载器以及插件机制，让其具有更好的灵活性
三、常用的webpack命令
1.webpack------------启动webpack的方法
2.webpack -w --------------提供watch方法，实时进行打包更新
3.webpack -p -------------------对打包后的文件进行压缩
4.webpack-d -------------提供source map ，方便调试代码
四、如何使用进行打包压缩
1.首先构建项目结构，文件名自定义，文件夹里新建一个吻文件，可以命名为main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/react.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="build/build.js"></script>
</body>
2.新建一个文件夹src，文件夹里面放两个js文件，react.min.js源文件和main.js，main.js文件的主要是你用react组件化的代码
var ContentMode = React.createClass({
render: function(){
return (
<div className="ContentMode">
<div class="contents">{this.props.contents}</div>
{this.props.children}
</div>
)
}
});
/* 页面div封装 上面三个模块 */
var Page = React.createClass({
render: function(){
return (
<div className="homepage">
<ContentMode contents ="longen">this is one comment</ContentMode >
<ContentMode contents ="longen2">this is two comment</ContentMode >
</div>
)
}
});
/* 初始化到content容器内 */
React.render(
React.createElement(Page,null),document.getElementById("content")
);
3、需要在根目录下生成package.json文件，需要进入项目文件的内根目录下执行命令：npm init
根据提示一一回答就行了，最后会在根目录下生成一个名叫package.json文件
4.执行命令：npm install -g webpack 安装全局webpack,在C盘会生成node_modules文件夹中会包含webpack，接着我们就可以执行webpack命令了。
5.每个目录下都必须有一个webpack.config.js文件，它的作用是告诉webpack需要做什么，
接着我们就可以配置webpack.config.js文件了，代码如下：
// entry 是页面中的入口文件，比如我这边的入口文件时main.js
// output: 是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；
// resolve: 定义了解析模块路径时的配置，常用的就是extensions; 可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，会自动补全。
// plugins: 定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.js;
// module.loaders：是文件的加载器，比如我们之前react需要在页面中引入jsx的js源码到页面上来，然后使用该语法，但是通过webpack打包后就不需要再引入JSXTransformer.js；看到上面的加载器；比如jsx-loader加载器就是代表JSXTransformer.js的，还有style-loader和css-loader加载器；因此在使用之前我们需要通过命令把它引入到项目上来；
module.exports = {
entry:"./src/main.js",
output:{
filename:"build/build.js"
},
module:{
loaders:[
//.css文件使用style-loader和css-loader来处理
{test:/\.css$/, loader:"style!css"},
//.js文件使用jsx-loader来编译处理
{test:/\.js$/, loader:"jsx-loader"},
// {
// test:/\.less$/,
// loader:"style!css!less"
// }
]
},
resolve:{
extensions:['','.js','.jsx']
},
plugins:[]
};
6、接着需要使用一些执行命令安装一下加载器
（1）jsx-loader加载器 npm install jsx-loader --save-dev
(2) style-loader加载器 npm install jsx-loader --save-dev
(3) css-loader加载器 npm install css-loader --save-dev
7、局部安装webpack 执行命令：npm install webpack --save-dev
8、最后执行webpack命令，在根目录下会生成一个build文件夹中build.js
9、可以使用命令：webpack --display-error-details命令，可以方便出错的时候查看详细的错误信息。
五、加载器的配置
module.exports = {
entry: "./src/main.js",
output: {
filename: "build.js",
path: __dirname + '/assets/',
publicPath: "/assets/"
},
module: {
loaders: [
{test: /.css$/, loader: 'style!css'},
{test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
resolve: {
extensions: ['', '.js', '.jsx'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
a : 'js/assets/a.js', // 后面直接引用 require(“a”)即可引用到模块
b : 'js/assets/b.js',
c : 'js/assets/c.js'
}
},
plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
}
module.loader: 其中test是正则表达式，对符合的文件名使用相应的加载器.
/.css$/会匹配 xx.css文件，但是并不适用于xx.sass或者xx.css.zip文件.
url-loader 它会将样式中引用到的图片转为模块来处理; 配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式。
entry 模块的入口文件。依赖项数组中所有的文件会按顺序打包，每个文件进行依赖的递归查找，直到所有模块都被打成包；
output：模块的输出文件，其中有如下参数：
filename: 打包后的文件名
path: 打包文件存放的绝对路径。
publicPath: 网站运行时的访问路径。
relolve.extensions: 自动扩展文件的后缀名，比如我们在require模块的时候，可以不用写后缀名的。
relolve.alias: 模块别名定义，方便后续直接引用别名，无须多写长长的地址
plugins 是插件项;