大概几个月前，刚接触 gulp 的时候，通过 gulp 对前端工作流进行优化，在 gulpfile.js 文件中写插件，编译 less、stylus，压缩 css、js 等等，感觉工作效率得到极大的提升，原本手动的东西，现在都是自动化了。
但是，现在，学习 react 的时候，我又不得不来学习 webpack。webpack 最近火得不行（其实已经火了很久了），当下最热门的前端资源模块化管理和打包工具,它能把各种资源，包括 jxs、coffeeJS、less／sass，甚至图片，当作模块来加载和使用。同样它需要一个 webpack.config.js 的配置文件，有专门针对于 css、js 和图片等插件，在 js 中直接通过 require 来使用模块，很方便。
webpack 可以将文件模块按照依赖打包成方便使用的前端资源，还可以将按需加载的模块进行异步加载。
ps：gulp/grunt 是前端构建工具，是自动化工具，可以简化前端流程；而 webpack 是前端模块化方案。虽然二者在某些功能上有共同点（比如压缩代码），但本质是不一样的，比如现在还有基于 gulp 的 webpack 插件gulp-webpack。
前端模块化
前端模块化是大势所趋，随着 webapp 的兴起，浏览器的功能越来越强大，而一个单页面在使用的过程中会加载更多的 JavaScript 代码，这给前端开发的流程和运行带来了很大的挑战。
时下，已经有不少前端模块化系统：
script 标签，这是最传统的文件模块，一个文件是一个模块，
这些接口会暴露在全局作用下，弊端很多：
全局作用域造成变量冲突
文件只能按照 script 的顺序进行加载
开发人员必须主观解决代码库和模块的依赖关系
在大型的项目中，会造成资源文件难以管理，代码库混乱不堪
CommonJS
NodeJS 遵循的就是 CommonJS 规范，这种通过 require 和 module.exports 的方式很常见：
//main.js
var module = require('./module.js')
// dosomething
module.exports = somevalue;优点是服务器端模块便于重用，简单易用，且 NPM 上有几十万个可以使用的模块包，缺点是这种加载方式属于同步加载，不适用于浏览器，且不能非阻塞的加载多个模块。关于 CommonJS 循环加载的原理，可以看看这篇文章中的介绍 ES6模块加载的实质 CommonJS 部分。
AMD CMD
AMD 是适合在浏览器中的异步加载的模块，
define("module", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
require(["module", "../file"], function(module, file) { /* ... */ });CMD 规范和 AMD 规范很像，CommonJS 规范保持了很大的兼容。
还有就是 ES6 中的模块加载系统，详情请移步ES6模块加载。
在上面的分析中，提到的都只是对 JavaScript 文件等加载，然而在前端的开发中还需要对图片，样式，字体文件和 html 模版等样式的加载，webpack 可以让这一切成为可能：
require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");在加载的过程中，还能通过对静态文件的分析，比如 css，把它内联到 html 的 style 样式中。
webpack 的优势
webpack 是集大成者，支持 CommonJS，AMD/CMD，还能对图片，样式等进行模块化。
比如直接使用 CommonJS 语法：
var m1 = require('module1');
var m2 = require('module2');
//dosomething
module.exports = function(){
m1();
m2();
}安装及使用
通过 npm 全局安装 webpack，npm install webpack -g，也可以在本地项目中安装依赖 npm install webpack --save-dev，前提要确保 npm init。
目录下面有一个静态页面 index.html 和 JS 入口文件 entry.js，
// entry.js
document.write('hello webpack');然后使用命令 webpack entry.js bundle.js 就可以生成 bundle.js 文件。
现在添加 module.js 文件，在 ertry.js 中引用：
//module.js
document.write('hello module');
//ertry.js
document.write(require('module'));webpack 会分析每个文件的入口，把依赖的相关文件都打包到 bundle.js。webpack entry.js bundle.js 这句话执行后，会先执行 entry.js，其他文件，则只有在 require 的时候才会加载。
还可以通过插件来加载样式模块。目录下添加一个 style.css 文件，安装 css 和 style 模块 npm install css-loader style-loader：
/* style.css */
body { background: yellow; }
// entry.js
require("!style!css!./style.css");
document.write('hello webpack');这个时候打包，刷新页面，就可以看到 index.html 中内联的 css 样式。
webpack.config.js
前面介绍的这种是命令行打包的方式，比较麻烦，一般都是写一个 webpack 的配置文件，上面的配置文件可以如下：
//webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}module.loader 中 loader 可能有人会有疑惑，这种用感叹号把模块放开表示 css 文件加载多个模块，加载的顺序从右到左，先加载 css 模块，再加载 style 模块。在 entry.js 文件中就可以简化的写成 require('./style.css')。
配置文件的几个比较重要的参数如下：
entry: 编译过程的输入
output: 编译过程的输出
module: 模块module的处理方式
plugin: 配置文件的插件入口
resolve 配置文件其他解决方案
output 代表输出，path 代表路径，filename 代表文件名。plugin 表示插件，有内置插件和扩展插件，
var webpack = require("webpack");
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
plugin: [
//内置压缩插件
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
}),
// 扩展插件
ComponentPlugin()
]
};更多插件可以去官网查看。
module 中最需要注意的就是 loaders，
test：正则表达式，用于匹配文件名（必须）
loader：需要加载的 loaders 列表，可用 ! 加载多个（必须）
include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
resolve 是配置的其他解决方案，比如 resolve.alias 可以定义模块的别名，resolve.root 可以定义绝对路径。resolve.extensions 可以省去加载文件的后缀名，即后缀名自动补全。但是必须要在前面加一个空的字符串，否则会导致无法加载的情况。
webpack 更强大的功能
webpack-dev-server
webpack-dev-server 是一个专门为 webpack 服务的 nodejs 服务器，通过 npm install --save-dev webpack-dev-server 命令来安装。
// webpack.config.js
devServer: {
contentBase: "./", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新
}Babel
Babel 是一个编译 JavaScript 的平台，它的功能非常强大，可用编译 JSX，ES6，ES7，生成浏览器识别的 JavaScript 语言。需要安装多个依赖：npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react。
//webpack.config.js
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]
},Hot Module Replacement
webpack 提供热更新，官网关于热更新的介绍：hot-module-replacement-with-webpack,webpack-dev-server。
webpack-dev-server 本身就带有热更新功能，只需要在参数启动参数重添加 webpack-dev-server --inline --hot，如果嫌每次添加麻烦，可用在 package.json 中 script 设置 start 或在 webpack.config.js 中开启。
html-webpack-plugin
这个插件主要是针对于 html 的，可以自动生成 html 文件，尤其当使用了 hash 之后，不用困扰因 hash 的变化带来的问题。
var webpack = require('webpack')
var htmlwebpackplugin = require('html-webpack-plugin')
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
plugins: [new htmlwebpackplugin()]
}有时候会因为 html 中必须要有一些特别的东西，不能直接生成，此时就需要配置模版：
module.exports = {
plugins:[
new htmlwebpackplugin({
filename: 'hello.html', // 生成的文件
template: 'src/template.html' // 模版文件
})
]
}更多配置信息，参考：
title: 页面 title
filename: 输出的 HTML 文件名，默认是 index.html
template: 模板文件路径，支持加载器，比如 html!./index.html
inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)
如果你感兴趣，还可以去看一看如何自己手动写 webpack 插件。链接1链接2
Environment flags
有时候，一些函数只需在 dev 环境下运行，有些函数要在 product 环境下运行，通过设置 webpack 的 DefinePlugin 就可以很轻松的帮助我们实现，比如：
var webpack = require('webpack');
var devFlagPlugin = new webpack.DefinePlugin({
// __DEV__ 默认是 false，除非手动设置开发环境
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [devFlagPlugin]
};// main.js
document.write('Hello World
');
if (__DEV__) { //如果开发环境
document.write(new Date());
}此时有两种运行方式，进入开发模式的运行方式：
# Linux & Mac
$ env DEBUG=true webpack-dev-server
# Windows
$ set DEBUG=true
$ webpack-dev-server总结
在接触 webpack 之前，强烈建议先学习 ES6。其实，很多人都说前端变化太快，昨天还很火热的框架，可能今天就被另一个所取代。我觉得，正是这种快速的更新，让那些喜欢学习，喜欢钻研的程序员，获得了新生，新的活力。共勉！
参考
webpack 中文官网
阮一峰 webpack-demos
webpack编译流程漫谈
webpack学习之路
入门Webpack，看这篇就够了
一小时包教会 —— webpack 入门指南
欢迎来我的博客讨论。