用 webpack 构建 AMD 项目

问题缘起

最近接手了一个历史遗留项目，找不到构建代码了，作为一个前端的基本素养，不能直接将源码丢在线上吧，还是得完善项目的构建，先需要好好分析下项目代码。

项目分析

项目是一个 AMD 项目，采用了百度的 esl（类似 require.js）作为加载器，使用了 jquery、underscore 等基本库，另外还用了 echarts 和 raphael 等库来做一些视觉渲染，样式直接使用了 css。

其中 esl 加载脚本的配置如下：

require.config({
    urlArgs: 'ver=' + (new Date()).getTime(),
    baseUrl: './src',
    paths: {
        text : '../lib/require.text',
        jquery: '../lib/jquery',
        underscore: '../lib/underscore',
        echarts: '../lib/echarts',
        raphael: '../lib/raphael',
        z: '../lib/z'
    }
});

看起来并不是特别的复杂，另外 webpack 可以处理各种类型的模块（AMD、commonjs、es6 modules），对于一切皆是模块的 webpack 来说，构建也应该不会太难。

webpack 配置

首先安装 webpack 相关库。

# webpack 相关
$ npm i -D webpack webpack-merge

# babel 相关
$ npm i -D babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-2

# loader 相关
$ npm i -D css-loader style-loader raw-loader file-loader url-loader

# plugin 相关
$ npm i -D copy-webpack-plugin html-webpack-plugin html-withimg-loader

新建 webpack 配置文件 webpack.config.js。

输入输出

首先配置输入和输出。

const path = require('path');
const resolve = loc => {
    return path.join(__dirname, '.', loc);
};

module.exports = {
    entry: {
        show: [resolve('src/show.js')]
    },

    output: {
        path: resolve('dist'),
        filename: '[name].[hash:6].js'
    }
}

配置别名

由于库文件没有使用 node_modules，而是位于 lib 目录，因此需要配置别名来定位这些库文件。

module.exports = {
    // ...
    resolve: {
        extensions: ['.js', '.json'],
        alias: {
            jquery: resolve('lib/jquery.js'),
            underscore: resolve('lib/underscore.js'),
            echarts: resolve('lib/echarts.js'),
            z: resolve('lib/z.js')
        }
    }
}

对比之前的 esl 配置，可以看到用于加载文本（此项目用于加载 html 模板）的 amd 插件 require.text 没有配置别名，后续会通过 loader 进行处理。

配置 loaders

配置 loader 之前需要分析项目中所有的 require()，找出所有的可能文件后缀，只有这样才知道用什么样的 loader 来处理这类型的文件。

另外需要将 require() 的路径改成相对路径（例如从 require("lib/abc") 需要改成 require("./lib/abc")），html 文件以及 css 文件中相关资源的路径也需要保证引用正确。

此项目比较特殊的是，需要用 html-withimg-loader 来处理 html 模板文件，该 loader 会处理 html 中的图片引用（查阅了下，html-loader 也可以）。

const appPath = resolve('src');
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [appPath]
            },
            {
                test: /\.(htm|html|tpl)$/i,
                loader: 'html-withimg-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader?limit=10000'
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader?limit=10000'
            }
        ]
    }
}

配置 plugins

我们需要将 lib 目录下的代码打包成一个文件，需要使用 CommonsChunkPlugin 插件。

同时需要使用 HtmlWebpackPlugin 插件来动态生成 html 文件。

最后，还需要拷贝一些资源目录到构建目录，因此需要借助 CopyWebpackPlugin 插件。

module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve('show.html'),
            inject: 'body',
            hash: false
        }),

        new CommonsChunkPlugin({
            name: 'vendor',
            chunks: ['show'],
            minChunks: module => /lib/.test(module.resource)
        }),

        new CopyWebpackPlugin([{
            from: resolve('./show/reports'),
            to: resolve('./dist/images')
        }]),

        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: true
            }
        })
    ]
}

总结

webpack 是一个很强大的 bundle 工具，尤其是 一切皆模块 的思想可以很方便的用来处理各种资源复杂的依赖关系。

附录完整的配置文件如下：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const resolve = loc => {
    return path.join(__dirname, '.', loc);
};
const appPath = resolve('src');

module.exports = {
    entry: {
        show: [resolve('src/show.js')]
    },

    output: {
        path: resolve('dist'),
        filename: '[name].[hash:6].js'
    },

    resolve: {
        extensions: ['.js', '.json'],
        alias: {
            jquery: resolve('lib/jquery.js'),
            underscore: resolve('lib/underscore.js'),
            echarts: resolve('lib/echarts.js'),
            z: resolve('lib/z.js')
        }
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [appPath]
            },
            {
                test: /\.(htm|html|tpl)$/i,
                loader: 'html-withimg-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader?limit=10000'
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader?limit=10000'
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: resolve('show.html'),
            inject: 'body',
            hash: false
        }),

        new CommonsChunkPlugin({
            name: 'vendor',
            chunks: ['show'],
            minChunks: module => /lib/.test(module.resource)
        }),

        new CopyWebpackPlugin([{
            from: resolve('./show/reports'),
            to: resolve('./dist/images')
        }]),

        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: true
            }
        })
    ]
}