学习地址：
https://segmentfault.com/a/1190000006178770
1.webpack：模块打包机（分析你的项目结构，找到
JavaScript模块以及其它的一些浏览器不能直接运行的拓
展语言（Scss，TypeScript等），并将其打包为合适的格
式以供浏览器使用。）
2.安装：
//全局安装
???????npm install -g webpack
???????//安装到你的项目目录
???????npm install --save-dev webpack
???????//初始化
???????npm init
3.功能：
//生成Source Maps（使调试更容易）
???????devtool选项配置结果
???????source-map
???????cheap-module-source-map
???????eval-source-map（开发中经常用的）
???????cheap-module-eval-source-map
???????//使用webpack构建本地服务器
???????npm install --save-dev webpack-dev-server
???????//Loaders
???????test：一个匹配loaders所处理的文件的拓展名
的正则表达式（必须）
???????loader：loader的名称（必须）
???????include/exclude:手动添加必须处理的文件（文
件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
???????query：为loaders提供额外的设置选项（可选）
???????loaders有：
???????处理js文件的:babel
???????处理css文件的:style-loader,css-
loader,postcss-loader
???????处理html文件的:html-loader
???????处理模版文件的:ejs-loader等
???????处理json文件的:json-loader
???????处理图片文件的:file-loader url-loader
image-webpack-loader
???????//Babel：编译JavaScript的平台 ?（es6,jsx等
）
???????npm一次性安装多个依赖模块，模块之间用空格
隔开
???????npm install --save-dev babel-core babel-
loader babel-preset-es2015 babel-preset-react
???????//css：css-loader使你能够使用类似@import
和 url(...)的方法实现 require()的功能,style-loader
将所有的计算后的样式加入页面中
???????CSS module：通过CSS模块，所有的类名，动画
名默认都只作用于当前模块
???????CSS预处理器：sass/less
???????PostCSS：首先安装postcss-loader 和
autoprefixer（自动添加前缀的插件）
???????????????npm install --save-dev postcss-
loader autoprefixer
4.插件（Plugins）:在webpack配置中的plugins关键字部
分添加该插件的一个实例
????????????????//HtmlWebpackPlugin：npm install
--save-dev html-webpack-plugin
????????????????//Hot Module Replacement（HMR）也
是webpack里很有用的一个插件，它允许你在修改组件代
码后，自动刷新实时预览修改后的效果。在webpack中实
现HMR也很简单，只需要做两项配置
??????????????????在webpack配置文件中添加HMR插件
；
??????????????????在Webpack Dev Server中添加“hot
”参数；
????????????????//OccurenceOrderPlugin :为组件分
配ID，通过这个插件webpack可以分析和优先考虑使用最
多的模块，并为它们分配最小的ID
????????????????//UglifyJsPlugin：压缩JS代码；
????????????????//ExtractTextPlugin：分离CSS和JS
文件
????????????????npm install --save-dev extract-
text-webpack-plugin
????????????????//image-webpack-loader 对图片就行
压缩
webpack知识总结
原文地址：http://www.cnblogs.com/jamie-web/p/webpack.html