Webpack DllPlugin 预编译配置

webpack.dll.config.js

/**
 * DllPlugin 预编译
 *
 * 编译命令： NODE_ENV=dev webpack --config  webpack.dll.config.js --progress
 * @type {webpack}
 */

const webpack = require('webpack');
const path = require('path');
const isDebug = process.env.NODE_ENV === 'dev';
const outputPath = isDebug ? path.join(__dirname, '/dll/debug') : path.join(__dirname, '/dll/dist');
const fileName = '[name].js';

// 资源依赖包，提前编译
const lib = [
    'react',
    'react-dom',
    'react-router',
    "react-addons-create-fragment",
    "react-bootstrap",
    "react-bootstrap-daterangepicker",
    "react-paginate",
    'redux',
    'react-redux',
    'react-router-redux',
    'redux-thunk',
    'immutable',

    "antd",
    "classnames",
    "echarts",
    "isomorphic-fetch",
    "js-cookie",
    "lodash",
    "md5",
    "moment",
    "validator",
    "zeroclipboard",
];

const plugin = [
    new webpack.DllPlugin({
        /**
         * path
         * 定义 manifest 文件生成的位置
         * [name]的部分由entry的名字替换
         */
        path: path.join(outputPath, 'manifest.json'),
        /**
         * name
         * dll bundle 输出到那个全局变量上
         * 和 output.library 一样即可。
         */
        name: '[name]',
        context: __dirname
    }),
    new webpack.optimize.OccurenceOrderPlugin()
];

if (!isDebug) {
    plugin.push(
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$', 'exports', 'require']
            },
            compress: { warnings: false },
            output: { comments: false }
        })
    )
}

module.exports = {
    devtool: '#source-map',
    entry: {
        lib: lib
    },
    output: {
        path: outputPath,
        filename: fileName,
        /**
         * output.library
         * 将会定义为 window.${output.library}
         * 在这次的例子中，将会定义为`window.vendor_library`
         */
        library: '[name]',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    plugins: plugin
};