【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')

    })

]

巴特西

【webpack】使用DllPlugin拆分模块

最新文章

热门文章