目錄結構：

配置splitChunks的時候，將所有的第三方庫都打包到一個chunk模組中了，這樣有一個問題，每一次重新編譯的時候都會進行一次打包，這樣如果我們引入的庫特別的多，每一次打包的代價會特別大

a.js檔案和b.js檔案內容：

import { $ } from "jquery"
console.log(vue)
console.log($)

dll的優化作用是為了提取出第三方庫，目的是webpack進行打包的時候不會將這些庫打包進去，如果需要提取，就需要配置這個打包第三方庫的檔案

webpack.dll.config.js檔案的作用就是為了打包第三方庫使用的配置，

dll的核心思想就是一勞永逸，只需要初始化的時候，進行一次打包即可， 後面我們開發編輯的程式碼一定不會在第三方庫當做修改

我們看打包之前的檔案大小

打包的大小是810kb，也就是a.js檔案和b.js檔案都將jquery引入了一遍

webpack.dll.config.js檔案：

const { resolve } = require("path")
const webpack = require("webpack");
module.exports = {
  // 入口檔案,入口檔案必須是陣列
  // 將node_modules中的jquery和vue提取出來
  entry: {
    libs: ["jquery"],
  },
  // 出口檔案
  output: {
    // 出口檔名
    filename: "
 
[name].js",
    // 出口檔案的路徑
    path: resolve(__dirname, 'dll'),
    // 暴露的變數新增一個hash值
    library: "[name]_[hash]"
  },
  plugins: [
    new webpack.DllPlugin({
      // 對映的目標檔名
      name: "[name_hash]",
      // 對映的檔案路徑
      path: resolve(__dirname, 'dll/manifest.json')
    })
  ]
}

這個檔案的作用是將 jquery打包為一個名為 Dll.js 的靜態資源包，同時生成一個 manifest.json 檔案方便對 Dll.js 中的模組進行引用。

要注意的是，執行 webpack 命令是預設執行該目錄下名為 webpack.config.js 或者 webpackfile.js 的檔案。所以需要通過 --config 指令手動指定該檔案，

 webpack --config webpack.dll.config.js

在 webpack.config.js 中新增引用。在 plugins 屬性中新增DllReferencePlugin 外掛，並指明 manifest.json 檔案的引用路徑。

   new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/manifest.json')
  })

然後再進行打包

此時打包的大小隻有1.6kb

但是我們開啟瀏覽器會發現此時報錯

因為webpack只配置忽略不打包這些檔案，但是檔案引入找不到地址

需要告訴webpack中的html模板檔案如何引入檔案

安裝外掛

npm install add-assets-html-webpack-plugin -D

配置webpack.config.js

plugins: [
    // html檔案
    new HtmlWebpackPlugin({
      // 模板路徑
      template: "./src/index.html",
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/manifest.json')
  }),
   // 會自動將指定目錄下的檔案複製一份到打包後文件目錄下，html檔案會自動新增src
   new AddAssetsHtmlWebpackPlugin({
    filepath: resolve(__dirname, 'dll/libs.js')
  })
  ],

此時在進行webpack打包就可以了。