【webpack】使用DllPlugin拆分模塊

開發過程中，我們經常需要引入大量第三方庫，這些庫並不需要隨時修改或調試，我們可以使用DllPlugin和DllReferencePlugin單獨構建它們。 具體使用如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        vendor: [
            'axios',
            'vue-i18n',
            'vue-router',
            'vuex'
        ]
    },
    output: {
        path: path.resolve(__dirname, '../static/'),
        filename: '[name].dll.js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'build', '[name]-manifest.json'),
            name: '[name]_library'
        })
    ]
}

 

執行webpack命令，build目錄下即可生成 dll.js 文件和對應的 manifest 文件，使用 DLLReferencePlugin 引入：

plugins: [
    new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require('./build/vendor-manifest.json')
    })
]