webpack5---10 将特定的代码单独打包

webpack5 --- 将特定的代码单独打包

在之前说过可以将公共代码分离打包出来， 但是如果功能代码比较多的时候，都打包都一块会导致单个代码比较大，那么如果将已知的公共文件以CDN的方式引入，那就会减小单个文件的体积，也会提高打包速度

实现上面的要求我们可用使用DLL这个插件，插件是webpack 下的插件， 无需单独虾藻

• 首先创建一个dll 的配置文件 webpack.dll.js

const {resolve} = require('path');
const { webpack } = require('webpack');
module.exports = {
  entry: {
    // 最终打包生成的[name] ---> jquery
    // ['jquery] --> 要打包的库是 jquery
    jquery: ['jquery']
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'dll'),
    library: '[name].[hash]'  // 打包的库
  },
  plugins:[
    // 打包生成一个 mainfest.json -->映射文件
    new webpack.DllPlugin({
      name: '[name].[hash]', //映射的文件名
      path: resolve(__dirname,'dll')
    })
  ],
  mode: "production"

}

// 运行该文件的命令  webpack --config webpack.dll.js

• 在主文件 webpack.config.js 中添加处理项

const { webpack } = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
plugins:[

//  告诉webpack 哪些库不参与打包，同时使用时的名称也的变
    new webpack.DllReferencePlugin({
      mainfest: resolve(__dirname,'dll')
    })
    // 将某个文件打包输出去， 并在html 中自动引入该资源
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve(__dirname,'dll')
    })
]