webpack的重要功能jessiexian

一.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文件