【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