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

野性酷女 2022-12-24 13:58 168阅读 0赞

## 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'
    }

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