webpack DllPlugin的用法

1. 首先将需要打包的文件打包为dll

需要一个打包配置 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')
    })
  ]
}

生成一个 react.dll.js打包文件和一个结构文件manifest.json，manifest.json用于读取打包前文件后打包后文件的对应关系，
可能会有多组文件需要打包。

打包命令

"script" : {
    "dll": "webpack --config webpack.dll.js --mode=development"
}

2. 项目中引入打包的结构文件，页面中引入打包文件

plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist/manifest.json')
    }),
    new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, 'dist/react.dll.js') })
]

3. 使用AtuoDllPlugin快速完成dll打包

上面的步骤中的打包配置略显繁琐，可以使用autodll-webpack-plugin代替上面的配置

new AutoDllPlugin({
    inject: true, // will inject the DLL bundle to index.html
    debug: true,
    filename: '[name]_[hash].js',
    context: path.join(__dirname, '..'),
    path: './dll',
    entry: {
        vendor: [ 'react','react-dom' ]
    }
})