webpack dll如何单独打包第三方库

1. 项目根目录创建webpack.dll.js文件

//webpack.dll.js
const { resolve } = require('path')
const { webpack } = require('webpack')
module.exports = {
 entry: {
   //这里以单独打包jquery库为例
   jquery: [ 'jquery' ]
 },
 output: {
   filename: '[name].js',   //打包后的文件名
   path: resolve(__dirname, 'dll'),  //打包到dll文件夹
   library: '[name]_[hash]' //打包后的js暴露出去的文件名
 },
  plugins: [
    //打包生成一个 manifest.json 作用：提供jquery映射的配置文件
    new webpack.DllPlugin({
      name: '[name]_[hash]',  //映射库暴露的名称
      path: resolve(__dirname, 'dll/manifest.json') //生成映射配置文件
    })
  ],
  mode: 'production'
}

webpack --config webpack.dll.js //执行这个文件进行打包

打包后生成文件：

--dll
   --jquery.js
   --manifest.json

2. 配置webpack.config.js文件，将单个打包后的库引入真正打包的项目内：

//webpack.config.js
const { resolve } = require('path')
const { webpack } = require('webpack')
module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' //打包输出的程序入口html文件
    }),
    //manifest.json文件通知webpack已经打包过了不需要打包的库
    new webpack.DllReferencePlugin({
       manifest: resolve(__dirname, 'dll/manifest.json')
    }),
    //将某个单独打包库输出给html引入
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve(__dirname, 'dll/jquery.js')
    })
  ],
  mode: 'production'
}

目的： 减轻每次打包都需要重复打包一些固定库！