21_webpack_DDL

DLL库（不再使用）

DLL全称是动态链接库(Dynamic Link Library)，是为软件在Windows中实现共享函数库的一种实现方式

webpack中也有内置DLL的功能，它指的是我们可以将可以共享，并且不经常改变的代码，抽取到一个共享的库

整个库在之后编译的过程中，会被引入到其他项目的代码中

DLL库的使用分成两步
　　第一步:打包一个DLL库
　　第二步:项目中引入DLL库

在升级到webpack4之后，React和Vue脚手架移除了DLL库

 

打包DLL库

const webpack = require("webpack");
const path = require("path");
// 主要代码
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // 主要代码
  entry: {
    vue: "vue",
  },
  // 主要代码
  output: {
    path: path.resolve(__dirname, "./dll"),
    filename: "dll_[name].js",
    // 暴露出的全局变量名
    // 主要是给DllPlugin中的name使用，这里要和DllPlugin的name保持一致
    library: "dll_[name]",
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
    ],
  },
  plugins: [
    // 主要代码
    new webpack.DllPlugin({
      // //必填，不然在web网页中找不到 'dll_[name]'，会报错
      context: __dirname,
      name: "dll_[name]",
      path: path.resolve(__dirname, "./dll/[name].manifest.json"),
    }),
  ],
};

/* 
const VueLoaderPlugin = require("vue-loader/lib/plugin");
 module: {
    rules: [
      {
        test: /\.vue/,
        use: "vue-loader",
      },
    ],
  },

*/

 

DLL使用

新建一个项目，在项目中还需要npm i vue 因为不下载vue包，你在js文件import引入会有问题

如果我们在代码中使用了Vue，我们有配置splitChunks的情况下，它会进行分包，打包到一个独立的chunk文件中

但是现在我们有了dll_vue，不需要单独去打包他们，可以直接去引用dll_vue即可

第一步：通过DllReferencePlugin插件告知要使用的Dll库

  plugins: [
    new webpack.DllReferencePlugin({
      manifest: resolveApp("./dll/vue.manifest.json"),
      // // AutoDllPlugin 的 context 必须和 package.json 的同级目录，要不然会链接失败,和DllPlugin的context路径对应起来
      context: resolveApp("./"),
    }),
  ],

第二步：通过AddAssetHtmlWebpackPlugin插件，将我们打包的Dll库引入到Html模板中

npm i add-asset-html-webpack-plugin -D

// 复制文件资源，并且在index.html中对资源进行引入
const AddAssetHtmlWebpackPlugin = require("add-asset-html-webpack-plugin");

new AddAssetHtmlWebpackPlugin({
      filepath: resolveApp("./dll/dll_vue.js"),
      outputPath: "auto",
    }),