webpack中的重要功能

一.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上）