k8w.io
WebPack DLLPlugin 的用法
2017-11-20作者:k8w

项目越来越大,webpack的编译时间也越来越长。
通过Webpack DLLPlugin,可以助你大幅节省编译时间。

作用

预先编译好一些文件,节省最终编译时间。

用法

准备两个webpack.config.js
webpack.dll.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        react: ['react', 'react-dom', ... ] //要预先打包的库,已经存在于node_modules的
    },
    output: {
        filename: '[name}_123456.js', //打包好的JS文件名,要在HTML里直接加载的
        path: path.resolve(__dirname, 'dist'),  //对应上面filename的输出路径
        library: '[name]_ABCABC'  //随便填 要与DllPlugin里的name相同 z注意:这会暴露一个同名的全局变量 
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'dll', '[name].json'),  //webpack正式编译时读取配置用的JSON文件存放位置,不需要放到dist里,随便放个别的文件夹吧
            name: '[name]_ABCABC'  ////随便填 要与output.library相同 
        })
    ]
}

OK,然后编译DLL

webpack --config webpack.dll.config.js

正式编译的webpack.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'index'),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new webpack.DllReferencePlugin({
            manifest: require("./dll/react.json")  //刚才的JSON
        })
    ]
}

正式编译

webpack

你会发现很多库显示

delegated ./node_modules/xxx/xxx.js from dll-reference XXXXXX 42 bytes {2} [built]

那么就是DLL引用成功了!

(正文完)
留言(0条)
发表新留言
您的大名:
必填
电子邮箱:
不公开,仅用于向你发送回复