学习地址：
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 对图片就行
压缩