啰嗦一下
你需要认识这些作为继续阅读的前提：npm, yarn
还有JS的几种模块化方式。
本文只是对文档的简单翻译，详细的配置使用方法参见官方文档。
webpack使用示例
安装
npm install webpack -g
// 或者：
yarn global add webpack
创建JS项目
//cats.js
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
//app.js (Entry Point)
cats = require('./cats.js');
console.log(cats);
Entry Point是你的应用启动的地方，webpack将跟踪模块之间的依赖关系
使用webpack打包
webpack ./app.js app.bundle.js
运行
node app.bundle.js
// 输出：["dave", "henry", "martha"]
项目结构
几种可能的命名方式：
源文件: src, app
打包文件: bin, dist, build
测试代码: test, tests, spec, specs
webpack配置文件
仅仅使用命令行是不能发挥webpack所有的强大功能的，这里就要用到配置文件了。
webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js'
}
};
配置文件放在项目根目录，然后就可以直接运行webpack
Loaders载入器
loaders是把其他非JS文件转化为JS文件，包括html, css, 图片, 二进制文件等。
而且loaders之间可以串联起来：
官方列出的loaders列表.
Plugins插件
Plugins是对打包之后的bundle.js做一些额外处理，比如代码压缩，代码混淆。
webpack包含一些内置的插件。代码示例：
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}