webpack中DllPlugin用法

Posted 2022-04-12 wuxianqiang

首先准备需要打包的库

webpack.dll.js

const webpack = require(‘webpack‘)
const path = require(‘path‘)

module.exports = 
  entry: 
    react: [‘react‘, ‘react-dom‘]
  ,
  output: 
    library:  ‘react‘, // 以一个库的形式导出
    filename: ‘[name].dll.js‘
  ,
  plugins: [
    new webpack.DllPlugin(
      name: ‘react‘,
      path: path.resolve(__dirname, ‘dist/manifest.json‘)
    )
  ]

 

package.json增加一个脚本

    "dll": "webpack --config webpack.dll.js --mode=development"

 

然后打包出文件react.dll.js和manifest.json

 

在开发环境配置中增加下面代码

  plugins: [
    new webpack.DllReferencePlugin(
      manifest: path.resolve(__dirname, ‘dist/manifest.json‘)
    ),
    new AddAssethtmlPlugin( filepath: path.resolve(__dirname, ‘dist/react.dll.js‘) )
  ]

 

用到了HTML引入静态资源的库

add-asset-html-webpack-plugin