Webpack: 为Web开发而生的模块管理器
原文地址：http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/
10 Sep 2014
对于开发人员而言，好的包管理器可以让工作事半功倍。现在流行的编程语言大多有自己的包管理系统。近年来，Web开发越来越火，其开发工具也随之越来越好用了，而Webpack就是一款专为Web开发设计的包管理器。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。
模块化编程
长久以来，Web开发者都是把所需Javascript、CSS文件一股脑放进HTML里面，对于庞大的项目来说管理起来非常麻烦。Node.js的出现改变了这种状态，虽然Javascript的模块并非Node.js发明，但确实是它把这个概念发扬光大了。
但Node.js毕竟是用于服务端的，为了将模块化技术用于浏览器，人们又造出了一大堆工具：RequireJS、Browserify、LABjs、Sea.js、Duo等。同时，由于Javascript的标准没有对模块的规范进行定义，人们又定义了一系列不同的模块定义：CommonJS、AMD、CMD、UMD等。这真是一件令人悲伤的事情，希望ES6 Module的出现能中止这种分裂的状态。
Webpack同时支持CommonJS和AMD形式的模块，对于不支持的模块格式，还支持对模块进行shimming。举个简单的例子：
// content.js
module.exports = "It works from content.js.";
// entry.js
document.write(require("./content.js"));
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
这里entry.js是入口文件，它加载了content.js。通过命令行对entry.js进行编译：
$ webpack ./entry.js bundle.js
打开index.html就会看到content.js中的内容已经被加载进来了。
Web开发中用到的不但有Javascript，还有CSS以及各种静态文件。Webpack定义了一种叫加载器loader的东西，它能够把各种资源文件进行转换，用正确的格式加载到浏览器中。比如对于上述程序，如果我们有一个对应的CSS文件：
/* style.css */
body {
background: yellow;
}
我们修改一下entry.js来加载该CSS：
require("!style!css!./style.css");
document.write(require("./content.js"));
然后再重新编译、打开index.html就可以看到CSS加载进来了。执行上述程序前我们必须安装所需的loader：
npm install --save-dev style-loader css-loader
在编译时，css-loader会读取CSS文件，并处理其中的import，返回CSS代码；而style-loader会将返回的CSS代码作为DOM的style。如果你用的是SASS，只要把require语句改成require("!style!css!sass!./style.scss")就可以了。
Webpack提供了很多常见的loader，开发的时候可以把用到的文件都require进来，生成一个单一的Javascript，便于发布。
上述require CSS的代码虽然功能强大，但写起来比较繁琐，Webpack支持在配置文件中进行配置，把符合条件的文件用同一组loader来进行处理。下面是我用的一组loader：
{
module: {
loaders: [
{test: /\.coffee$/, loader: 'coffee'},
{test: /\.html$/, loader: 'html'},
{test: /\.json$/, loader: 'json'},
{test: /\.css$/, loader: 'style!css!autoprefixer'},
{test: /\.scss$/, loader: 'style!css!autoprefixer!sass'},
{test: /\.woff$/, loader: "url?limit=10000&minetype=application/font-woff"},
{test: /\.ttf$/, loader: "file"},
{test: /\.eot$/, loader: "file"},
{test: /\.svg$/, loader: "file"}
]
}
}
有了上述配置，直接require('./style.css')就可以了，系统会自动先执行autoprefixer，然后加载CSS，然后再加载为DOM的style。
此外，Webpack还支持插件，实现对Javascript的压缩、替换等各种操作。
依赖模块的管理
Webpack自己并不提供模块的下载，但它可以和已有的包管理器很好的配合。你可以用npm、Bower、component等来管理你的Web开发资源，同时在Webpack中加载它们。
Webpack的文件加载分为三种：
- 绝对路径，比如
require('/home/me/file')。此时会首先检查目标是否为目录，如果是目录则检查package.json的main字段（你可以让Webpack同时检查Bower的字段）；如果没有package.json或者没有main字段，则会用index作为文件名。经过上述过程，我们解析到一个绝对路径的文件名，然后会尝试为其加上扩展名（扩展名可在webpack.config.js中设置），第一个存在的文件作为最终的结果。 - 相对路径，比如
require('./file')。使用当前路径或配置文件中的context作为相对路径的目录。加载过程和绝对路径相似。 - 模块路径，如
require('module/lib/file')。会在配置文件中的所有查找目录中查找。
对于复杂的模块路径，还可以设置别名。一个路径解析配置的例子：
{
resolve: {
root: [appRoot, nodeRoot, bowerRoot],
modulesDirectories: [appModuleRoot],
alias: {
'angular': 'angular/angular',
'lodash': 'lodash/dist/lodash'
},
extensions: ['', '.js', '.coffee', '.html', '.css', '.scss']
}
}
工具的集成
Webpack能够和grunt、gulp、karma等已有工具很好地集成。
此外，除了输出单一文件，Webpack还支持代码分割、多入口以及运行时模块替换，是非常值得Web开发者关注的一个工具。
最后附上我的配置文件：
// webpack.config.js
var path = require('path');
var webpack = require('webpack');
var appRoot = path.join(__dirname, 'app');
var appModuleRoot = path.join(__dirname, 'app/components');
var bowerRoot = path.join(__dirname, 'bower_components');
var nodeRoot = path.join(__dirname, 'node_modules');
module.exports = {
entry: 'app',
output: {
path: path.resolve('./app/assets'),
filename: 'bundle.js',
publicPath: '/assets/'
},
resolve: {
root: [appRoot, nodeRoot, bowerRoot],
modulesDirectories: [appModuleRoot],
alias: {
'angular-ui-tree': 'angular-ui-tree/dist/',
'angular-date-range-picker': 'angular-date-range-picker/build/'
},
extensions: ['', '.js', '.coffee', '.html', '.css', '.scss']
},
resolveLoader: {
root: nodeRoot
},
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
}),
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
])
],
module: {
loaders: [
{test: /\.coffee$/, loader: 'coffee'},
{test: /\.html$/, loader: 'html'},
{test: /\.json$/, loader: 'json'},
{test: /\.css$/, loader: 'style!css!autoprefixer'},
{test: /\.scss$/, loader: 'style!css!autoprefixer!sass'},
{test: /\.woff$/, loader: "url?limit=10000&minetype=application/font-woff"},
{test: /\.ttf$/, loader: "file"},
{test: /\.eot$/, loader: "file"},
{test: /\.svg$/, loader: "file"}
]
}
};