一.devtool
devtool: “eval-source-map” webpack打包后的文件可读性非常低，不利于调试，使用devtool可以生成对应的源码便于调试。使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
二. webpack-dev-server
webpack-dev-server 是一个本地开发服务器，居于node.js实现的，使用npm run dev 后就可以使用默认的8080端口在浏览器上访问了，类似于apache的功能。
三.loaders
loader可以让webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件
css-loader 和 style-loader 就是用来处理样式的。
四.babel(很重要)
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：
让你能使用最新的JavaScript代码（ES6，ES7等待），而不用管新标准是否被当前使用的浏览器完全支持；
让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
五.plugins
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
常用的插件：
HtmlWebpackPlugin
Hot Module Replacement（HMR） 热加载：允许你在修改组件代码后，自动刷新实时预览修改后的效果
clean-webpack-plugin 去除build文件中的残余文件
OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin： 压缩JS代码
ExtractTextPlugin：分离CSS和JS文件
六.webpack配置文件
- 如果与输入相关的需求，找entry（比如多页面就有多个入口）
- 如果与输出相关的需求，找output（比如你需要定义输出文件的路径、名字等等）
- 如果与模块寻址相关的需求，找resolve（比如定义别名alias）
- 如果与转译相关的需求，找loader（比如处理sass处理es678N）
- 如果与构建流程相关的需求，找plugin（比如我需要在打包完成后，将打包好的文件复制到某个目录，然后提交到git上）