21_webpack

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",

    }),

巴特西

21_webpack_DDL

DLL库（不再使用）

打包DLL库

DLL使用

最新文章

热门文章