JavaSript 模块化打包已混迹江湖许久。2009年，RequireJS 就提交了它的第一个版本，Browserify 接踵而至，随后其他打包工具也开始大行其道。最终，Webpack 从其中脱颖而出。如果你对它不甚了解，希望我的文章能让你上手这件强力打包工具。

什么是模块化打包工具？

在大多数语言（JS 的最新版本 ECMAScript 2015+ 也支持，但并非支持所有浏览器）中，你可以将代码拆分至多个文件，并且通过在业务代码中引用这些文件来使用它们包含的方法。可惜的是浏览器并不拥有这个能力。因此，模块化打包工具应运而生，它以两种形式为浏览器提供这个能力：1.异步加载模块，并且在加载结束后运行它们。2.将需要用到的文件拼凑成单一 JS 文件，最终在 HTML 中使用 <script> 标签加载该 JS 文件。

如果没有模块化加载及打包工具的话，你就得手动拼凑文件或者在 HTML 中加载无数的 <script> 标签了，而且这样干有一些不好的地方：

• 你需要关心文件的加载顺序，包括哪些文件依赖于其他文件；还需要确认是否引入了不需要的文件。
• 多个 <script> 标签意味着用多个网络请求来加载代码，同时也意味着更差的性能。
• 显然，其中有很多本可以交给计算机完成的手工活。

大多数模块化打包工具直接跟 npm 或者 Bower（译者注：两者都是包管理工具）整合，这样可以让你更容易地在业务代码中添加第三方依赖包（dependencies）。你仅需要安装一下，然后写一行代码引入它们，接着运行模块化打包工具，这样就已经将第三方代码整合进自己的业务代码了。或者，如若配置正确，你可以将所有要用的三方代码整合进一个分开的文件，这样一来，当你更新业务代码，用户需要更新缓存的时候，他们就无需重新下载公共库代码（vendor code）了。

为什么选择 Webpack ?

至此，你已对 Webpack 的愿景有了基础的认知，然而为什么在各路豪杰中选择 Webpack 呢？在我看来有这样一些理由：

• 小鲜肉的特性助了它一臂之力，借此特点它可以绕开或者避免前辈们遇到的问题。
• 上手简单。如果只是想打包一些JS文件，而没有其他需求的话，你甚至都不需要一份配置文件。
• 它的插件体系使其能做更多事情，从而十分强大，所以它可能是你需要的唯一构建工具。

据我所知，少有其他的模块打包和构建工具也能做到这些。但 Webpack 仍胜一筹：当你踩坑的时候有庞大的社区支持。
Browserify 的社区可能只是大，如果它不大的话，就会缺少一些 Webpack 的潜在必要特性。说了这么多 Webpack 的优点，估计你就等上代码了吧？那么我们开始。

安装 Webpack

在使用 Webpack 前，我们首先要先把它安装好。为此我们需要 Node.js 和 npm ，我就假设你已经安装过它们了，实在没有的话，请从Node.js 官网开始吧。

有两种方式安装 webpack （或着是其他 CLI 包）：全局安装（globally）或者本地安装（locally）。对于全局安装，虽然你可以在任意目录下使用它，但是它不会包括在项目的依赖模块列表（dependencies）中。此外，你也不能在两个不同的项目（有些项目可能需要投入更多工作量才能更新到最新版本，所以这些项目还需要维持老版本）中切换不同版本的 Webpack 。所以我更愿意本地安装 CLI 包，并且用相对路径抑或是 npm 脚本来运行它。如果你不习惯本地安装 CLI 包，可以看一下我之前写的关于摆脱全局安装 npm 包的博文。

不管怎样，在示例项目中，我们就使用 npm 脚本。接下来，先本地安装示例项目。首先：创建一个用来实验和学习 Webpack 的目录。 我在 GitHub 上有一个仓库，你可以将它 clone 到本地，然后在分支间切换来进行下面的学习，或者从零开始创建一个新项目，此后可以与我的仓库代码进行对照。

经过命令行选择，一进到项目目录，你将用 npm init 命令来初始化项目。接下来要填的信息一点都不重要（译者注：一路回车即可），除非你想把项目发布到 npm 上。

至此 package.json 文件准备就绪（它是通过 npm init 命令创建的），在此文件中，你可以保存依赖包信息。我们通过 npm install webpack -D （-D 是 --save-dev 命令的简写，它的作用是将 npm 包作为开发环境的依赖包安装，并将依赖信息保存到 package.json 文件中）命令将 Webpack 作为依赖包安装。

我们需要一个简单的应用来开启运用 Webpack 之旅。所谓的简单就是：首先执行 npm install lodash -S（-S == --save） 安装 Lodash，如此一来我们的简单应用就有一个依赖包可以用来加载了。接着我们创建一个 src 目录，再于该目录中创建名为 main.js 的文件，其内容如下：

"scripts": {
    "build": "webpack src/main.js dist/bundle.js",
}

"scripts": {
    "prebuild": "del-cli dist -f",
    "build": "webpack src/main.js dist/bundle.js",
    "execute": "node dist/bundle.js",
    "start": "npm run build -s && npm run execute -s"
  }

module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    }
};

"scripts": {
    "prebuild": "del-cli dist -f",
    "build": "webpack",
    "execute": "node dist/bundle.js",
    "start": "npm run build -s && npm run execute -s"
}

import { map } from 'lodash';

console.log(map([1,2,3,4,5,6], n => n*n));

module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            …
        ]
    }
};

…
rules: [
    { test: /\.jsx?$/, loader: 'babel-loader' }
]
…

…
rules: [
    {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
            fakeoption: true
        }
    }
]
…

…
rules: [
    {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
            plugins: ['transform-runtime'],
            presets: ['es2015']
        }
    }
]
…

…
rules: [
    {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
            plugins: ['transform-runtime'],
            presets: ['es2015']
        }
    }
]
…

entry: [
    'babel-polyfill',
    './src/main.js'
],

<ul>
  {{#each numbers as |number i|}}
    <li>{{number}}</li>
  {{/each}}
</ul>

import { map } from 'lodash';
import template from './numberlist.hbs';

let numbers = map([1,2,3,4,5,6], n => n*n);

console.log(template({numbers}));

import { map } from 'lodash';
import template from 'handlebars-loader!./numberlist.hbs';

let numbers = map([1,2,3,4,5,6], n => n*n);

console.log(template({numbers}));

…
rules: [
    {/* babel loader config… */},
    { test: /\.hbs$/, loader: 'handlebars-loader' }
]
…

<ul>
<li>1</li>
<li>4</li>
<li>9</li>
<li>16</li>
<li>25</li>
<li>36</li>
</ul>

…
"scripts": {
  "prebuild": "del-cli dist -f",
  "build": "webpack",
  "server": "http-server ./dist",
  "start": "npm run build -s && npm run server -s"
},
…

var HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        'babel-polyfill',
        './src/main.js'
    ],
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
                options: { plugins: ['transform-runtime'], presets: ['es2015'] }
            },
            { test: /\.hbs$/, loader: 'handlebars-loader' }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin()
    ]
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <h2>This is my Index.html Template</h2>
    <div id="app-container"></div>
</body>
</html>

var HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        'babel-polyfill',
        './src/main.js'
    ],
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
                options: { plugins: ['transform-runtime'], presets: ['es2015'] }
            },
            { test: /\.hbs$/, loader: 'handlebars-loader' }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Intro to webpack',
            template: 'src/index.html'
        })
    ]
};

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
    var b = require("module-b");
    // …
});

require(["module-a", "module-b"], function(a, b) {
    // …
});

var HtmlwebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
    entry: {
        vendor: ['babel-polyfill', 'lodash'],
        main: './src/main.js'
    },
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
                options: { plugins: ['transform-runtime'], presets: ['es2015'] }
            },
            { test: /\.hbs$/, loader: 'handlebars-loader' }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Intro to webpack',
            template: 'src/index.html'
        }),
        new UglifyJsPlugin({
            beautify: false,
            mangle: { screw_ie8 : true },
            compress: { screw_ie8: true, warnings: false },
            comments: false
        }),
        new CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.bundle.js"
        })
    ]
};