Webpack模块加载器
一、介绍
Webpack是德国开发者 Tobias Koppers 开发的模块加载器，它能把所有的资源文
件（JS、JSX、CSS、CoffeeScript、Less、Sass、Image等）都作为模块来使用和处理。
作为一个模块打包工具，主要功能是打包资源文件并整合到一个包中，我们在开发时，只需
要引用一个包文件，就能加载预先设计好的模块功能。
二、安装
不同文件类型的资源，Webpack有对应的模块loader，ES6语法转换用的是babel-loader，
dataUrl用的是url-loader，样式用的style、css-loader。
loader列表：http://webpack.github.io/docs/list-of-loaders.html
# 安装webpack
npm install webpack
# 使用babel、css、dataUrl模块
npm install style-loader css-loader url-loader babel-loader babel-preset-es2015
# 创建webpack.config.js文件
touch webpack.config.js
安装Webpack之后，可以使用webpack命令行工具，它默认读取当前目录下的webpack.config.js配置文件。
三、基本使用
webpack声明加载babel、style、css、url的loader之后会读取main.js所有模块，并把打包
后的结果输出到bundle.js文件中。
module.exports = {
// 读取main.js文件中引用的所有模块
entry: './main.js',
// 执行打包后输出的文件
output: {
filename: 'bundle.js'
},
// 加载模块
module: {
loaders: [
// 匹配所有js文件，用babel工具识别ES6代码转换成ES5
{ test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015']} },
// 匹配所有css文件, 用style和css工具解析
{ test: /\.css$/, loader: 'style-loader!css-loader' },
// 匹配所有png文件，解析成dataUrl格式
{ test: /\.(png|jpg)$/, loader: 'url-loader'} // inline base64 URLs for <=8k images, direct URLs for the rest
]
}
};
创建五个资源文件，分别写入
1. main.js
2. js/console-01.js
3. js/console-02.js
4. css/index.css
5. images/3.jpg
// main.js - 加载模块
// --------------------------------------------
require('./js/console-01.js');
require('./js/console-02.js');
require('./css/index.css');
// 读取图片模块，并输出到body中
var img = document.createElement('img');
img.src = require('./images/react.jpg');
document.body.appendChild(img);
// --------------------------------------------
// JS - console-01.js
console.log('console 01');
// JS - ES6 - console-02.js
for (let i = 2; i <= 10; i++) {
console.log('console 02');
}
// CSS样式模块
body {
background: #ccc;
}
运行webpack命令，它会读取main.js文件，并把main.js依赖的模块进行打包处理，最终输出到bundle.js文件下。
# 运行webpack命令
webpack
# 输出结果
------------------------------------------------------
Hash: d9ca67a5753768b7c625
Version: webpack 1.12.11
Time: 52ms
Asset Size Chunks Chunk Names
bundle.js 24 kB 0 [emitted] main
+ 8 hidden modules
------------------------------------------------------
创建一个index.html文件，并引用bundle.js打开浏览器后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="./bundle.js"></script> </body> </html>
bundle.js文件包含了 CSS样式加载、图片dataUrl、JS 的合并打包处理。
四、哪些项目用到Webpack
1. React（JSX）
2. Vue （.vue）
3. Ant Design （淘宝Ant全组件）
五、哪些项目适合用Webpack
1. 单页应用 SPA （Single Page Application）
2. 需要把资源文件整理成一个文件包的项目
3. 用到ES6和JSX项目
4. 可以考虑代替Gulp、Grunt等工具
参考资料：
http://webpack.github.io/
https://github.com/webpack
http://segmentfault.com/a/1190000002551952
