webpack5--DllPlugin

好文推荐

localStorage的别样用法

背景

前文对webpack进行了升级，但只是做了语法内容的替换，并没有进行相关的优化，在翻webpack文档过程中看到了DIIPlugin随进行尝试并记录

• 新建webpack.dll.config.js

填写打包代码并执行会在对应output的位置生成DII文件

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['vue', 'vue-router', 'vuex','view-design'],
  },
  output: {
    filename: `[name].dll.${Math.ceil(Math.random() * 10000)}.js`,
    path: resolve(dllPath),
    library: '[name]_dll',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll',
      path: resolve(`${dllPath}/[name]_manifest.json`),
    }),
  ],
};

• 在生产构建时使用DllReferencePlugin建立映射关系

new webpack.DllReferencePlugin({
  context: path.join(__dirname,'..'),
  manifest: require(resolve(`${dllPath}/vendor_manifest.json`)),
})

• 在index.html中全局引入

new AddAssetHtmlPlugin([
  {
    filepath: path.resolve(resolve(`${dllPath}/*.js`)),
    includeSourcemap: false,
  },
]),