【webpack】中DllPlugin用法

首先准备需要打包的库

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