webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
传统工具中，流程是，将 js, css, html 各自合并，压缩，形式一个或多个文件，分别在各处引用。
但 webpack 相对于之前的工具区别于，所有的东西都是资源，像 css, js, image 亦或 json 等，可以通过 loader 来进行加载。
## 安装使用 Webpack
1 2 3 4 $ yarn add --dev webpack webpack-dev-server $ yarn global add --dev webpack webpack-dev-server
在项目中创建 webpack.config.js 即可开启使用。
可以依据不同环境，增设不同的配置文件 webpack.production.config.js
## 一切都在**配置文件**
Webpack 所有的配置都在 webpack.config.js 文件中。其中包括以下几个大的类别：
Context/Entry/Output 这是几个必备基础配置，我们来一一讲解：
context: 配置 entry 和 loader 工作所在的根目录。
entry: 应用的入口文件，该文件和其依赖，最终会被编译到一个文件。（可以配置为多个对象，编译出对应个数的结果文件。）
output: 入口文件编译后的配置项，可以是一个固定字符串，也可是以一个 [name].[hash].bundle.js 的变量配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 let config = { context : path.resolve (__dirname, 'src' ), entry : { app : './main.jsx' }, output : { path : path.resolve (__dirname, 'dist' ), publicPath : '/' , filename : "[name].[hash].bundle.js" } }
Module Webpack 是设计为处理 JavaScript 文件的，但其也可以处理任何的文件类型，这归功于强大的 Loaders 机制。
Loader 的使用方法是，通过正则匹配到一些类型的文件，然后对其依次经过配置 loader 的处理。Loader 可以配置多个，倒序依次处理。
示例中，是对 scss 文件的处理，先由 sass-loader 进行编译，然后交由 css-loader，最后由 style-loader 来处理。
1 2 3 4 5 6 7 8 9 10 11 let config = { module : { rules : [{ test : /\.scss$/ , use : [ 'style-loader' , 'css-loader' , 'sass-loader' , ]} ]} }
Plugins
和 Module 针对文件类型不同的是 Plugin 处理的是：下面，主要讲几个常用的 Plugin 和配置：
- webpack.HotModuleReplacementPlugin webpack 内置 Plugin，自动热加载，就是在开发时，一旦有文件改动，浏览器会自动刷新。
- webpack.optimize.CommonsChunkPlugin 正如其名，它会让引用模块中重复的地方取出，做成一个单独的文件，这样可以将一些公共的库取出，降低改动带来的更新成本。
如果你正在将应用拆解，打包成多个 output 的话（如果应用的某部分有大量不需要提前加载的 JS 的话，这样做会很有用），那么在这些文件里就有可能出现重复的代码，因为在解决依赖问题的时候它们是互相不干预的。幸好，Webpack 有一个内建插件 CommonsChunk 来处理这个问题：
现在，在 output 的文件里，如果有任意模块加载了两次或更多（通过 minChunks 设置该值），它就会被打包进一个叫 commons.js 的文件里，后面你就可以在客户端缓存这个文件了。当然，这肯定会造成一次额外的请求，但是却避免了客户端多次下载相同库的问题。所以在很多场景下，这都是提升速度的举措。
- webpack.optimize.UglifyJsPlugin 代码压缩，用于生产环境。
- webpack.ProvidePlugin 全局挂载插件，用于挂载老的代码，如 jQuery 之类的。
把 CSS 从 JS 中的 import/reuqre 中取出来，放到一个单独的 CSS 文件中。
不用开发人员自己在 index.html 中加 bundle.js, bundle.css 等 output 文件，因为这可能是一个 hash 值，这个插件会帮你搞定。
效果：
1 2 3 <link href ="/app.4683be2.css" rel ="stylesheet" > </head > ... <script type ="text/javascript" src ="/app.2e17047c719b4525dc77.bundle.js" > </script >
拷贝资源插件
最常用的，就是 alias，给一个模块路径起上一个别名，这样在每次 import 时，可以少写很多代码。
Webpack DevServer
DevServer 是一个内建的 HTTP 服务器的独立程序，可通过 webpack-dev-server 命令启动，为开发时提供方便。
它也可以使用 webpack.config 文件来进行配置，或通过命令行参数来进行配置，但有点参数只能通过命令行参数。
一种是命令行配置：
1 $ webpack-dev-server --open --host 0.0.0.0 --port 5000
另一种是在 webpack.config.js 中加入配置项目
1 2 3 4 5 6 7 let config = { devServer : { contentBase : path.resolve (__dirname, 'src' ), historyApiFallback : true , hot : true } }
Devtool 主要是配置生成何种方式的 Source Mpas。
## 其它事项
ECMAScript 2015 new syntax 一个有着代码洁癖的人，是不会让整个项目中再出现 ES 2015 前风格的代码的，如何解决 webpack.config 呢？
其实有个很简单的办法，把 webpack.config.js 改名成 webpack.config.babel.js 就可以了。
Webpack 在执行时会先用 Babel 把配置文件转成 ES5 代码再继续处理。一切 Babel 支持的语言特性都可以用。
## REF::
---
