前端构建工具 Webpack

现在 Web 前端发展得非常快，项目也越来越庞大，项目所依赖的模块也越来越多，我们需要一个帮助我们管理依赖并将依赖一起打包的工具。市面上的确已经有了非常优秀的像 Grunt 和 Gulp 这样的自动化构件工具，但是我们又为什么要重复制造轮子呢：

包管理工具 npm bower yarn

以下是 Webpack 指南的原话：

这些已有的模块化工具并不能很好的完成如下的目标：

• 将依赖树拆分成按需加载的块

• 初始化加载的耗时尽量少

• 各种静态资源都可以视作模块

• 将第三方库整合成模块的能力

• 可以自定义打包逻辑的能力

• 适合大项目，无论是单页还是多页的 Web 应用

当然首先要安装 Node.js；

$ npm install webpack -g

可以通过如下命令尝试是否安装 OK：

$ webpack -h

进入到项目目录，初始化项目后：

$ npm install webpack --save-dev

document.write('It works.');

运行如下命令，打开 index.html 会看到 It works.：

$ webpack src/app.js dist/bundle.app.js

添加一个新模块，并在 app.js 中引用此模块：

module.exports = 'It works from module.js';

var module = require('./module.js');

document.write('It works.');
document.write(module);

再次运行打包命令，打开 index.html 会看到 It works.It works.It works from module.js。

Webpack 会分析入口文件，解析包含依赖的各个文件，这些模块都会打包到 bundle.app.js 中去。

Loader 是模块和资源的转换器，Webpack 只会处理 Javascript 模块，如果要处理其它类型的文件就需要靠 Loader 来做转换。我们接着上面的例子：

$ npm install css-loader style-loader --save-dev

body { color: red; }

var module = require('./module.js');require("./style.css") // 引入 style.cssdocument.write('It works.');document.write(module);

运行如下命令，打开 index.html 会看到红色的 It works.It works.It works from module.js：

$ webpack src/app.js dist/bundle.app.js --module-bind 'css=style!css'

当然我在打包的过程中会有各种不同的情况需要处理，如果通过这种命令行来处理显得有写困难，并且难以理解。为了方便我们可有通过配置来完成这个事情。在项目的根目录创建配置 webpack.config.js ：

var webpack = require('webpack');module.exports = {    entry: './src/app.js',    output: {        path: './dist',        filename: 'bundle.app.js'
    },    module: {        loaders: [
            {test: /.css$/, loader: 'style!css'}
        ]
    }
}

这样一来，就可以直接通过命令 webpack 来打包了。

Webpack 插件可以完成更多的 Loader 无法完成的功能，例如：html-webpack-plugin 可以自动的创建 html 模版，并且将依赖的最终产物自动的添加的 html 内部，我们尝试一下：

$ npm install html-webpack-plugin --save-dev

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: './src/app.js',    output: {        path:'./dist',        filename: 'bundle.app.js'
    },    module: {        loaders: [
            {test: /.css$/, loader: 'style!css'}
        ]
    },    plugins: [        new HtmlWebpackPlugin({            template: './src/index.html'
        })
    ],
}

修改 src/index.html 去除中间的 js 的引用：

这样在此运行 webpack 命令，打包结束后会发现 dist 文件夹中自动的创建了一个 index.html 并且把一来的 bundle.app.js 自动添加了进去。

借助 webpack-dev-server 会让我们的开发环境更加的简单，它可以创建一个 web 服务，并且可以监听程序的变化并自动刷新页面。

$ npm install webpack-dev-server --save-dev

// ...module.exports = {    // ...
    devServer: {        inline: true,
        progress: true,
        port: 8080,
        historyApiFallback: true
    }    // ...}

运行如下命令后，在浏览器中打开：http://localhost:8080/ 就可以看到你的页面了：

$ $(npm bin)/webpack-dev-server

chunk