【webpack】中DllPlugin用法

小咪咪 2021-10-26 16:26 340阅读 0赞

首先准备需要打包的库

webpack.dll.js

const webpack = require('webpack')
    const path = require('path')
    
    module.exports = {
      entry: {
        react: ['react', 'react-dom']
      },
      output: {
        library:  'react', // 以一个库的形式导出
        filename: '[name].dll.js'
      },
      plugins: [
        new webpack.DllPlugin({
          name: 'react',
          path: path.resolve(__dirname, 'dist/manifest.json')
        })
      ]
    }

package.json增加一个脚本

"dll": "webpack --config webpack.dll.js --mode=development"

然后打包出文件react.dll.js和manifest.json

在开发环境配置中增加下面代码

plugins: [
        new webpack.DllReferencePlugin({
          manifest: path.resolve(__dirname, 'dist/manifest.json')
        }),
        new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, 'dist/react.dll.js') })
      ]

用到了HTML引入静态资源的库

# [add-asset-html-webpack-plugin][] #

转载于:https://www.cnblogs.com/wuxianqiang/p/11183736.html

[add-asset-html-webpack-plugin]: https://github.com/SimenB/add-asset-html-webpack-plugin

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关 java中++用法

x++和++x的运用 int x = 3; int y; x++; //或者++x System.out.println(x);

Dear 丶/ 2024年02月19日 14:53/ 0 赞/ 72 阅读

相关 Webpack 打包太慢? 试试 Dllplugin

webpack在build包的时候，有时候会遇到打包时间很长的问题，这里提供了一个解决方案，让打包如丝般顺滑~ 1. 介绍在用 Webpack 打包的时候，对于一些不

短命女/ 2023年08月17日 17:47/ 0 赞/ 155 阅读

相关 webpack打包工具用法

1 webpack的基础知识 webpack是一个前端资源加载/打包工具，将根据模块的依赖关系进行静态分析，并依据规则生成对应的静态资源。安装：先安装nodex.js

落日映苍穹つ/ 2023年06月30日 09:12/ 0 赞/ 22 阅读

相关 Webpack5 新功能 Module Federation 用法

Webpack5 新功能 Module Federation 的作用就是：让不同项目的模块可以通过远程提供给其它项目使用而这个功能在一个叫`ModuleFederat

Myth丶恋晨/ 2022年12月31日 01:12/ 0 赞/ 192 阅读

相关 html5中如何调用dll文件,使用DllPlugin优化webpack打包性能（基于vue-cli）

本文主要介绍两个插件的使用，DllPlugin 和 DllReferencePlugin，后者配合前者使用。项目 Github 地址：https://github.com/

分手后的思念是犯贱/ 2022年10月06日 09:57/ 0 赞/ 546 阅读

相关 Java中Calendar用法与Date用法（详细）

目录一、常用类Calendar Calendar 编程实例二、常用类Date Date 编程实例 -------------------- 一、常用类Cale

素颜马尾好姑娘i/ 2022年09月10日 06:09/ 0 赞/ 205 阅读

相关 php中的each()用法和list()用法

each()中将数组中当前元素的键名和键值 each() 函数返回当前元素的键名和键值，并将内部指针向前移动。该元素的键名和键值会被返回带有四个元素的数组中。两个元素（1

╰半橙微兮°/ 2022年07月18日 05:29/ 0 赞/ 284 阅读

相关【javascript】webpack 使用 DllPlugin加速构建

什么是Dll windows系统里面，你肯定看到过.dll后缀的文件，这些文件叫做动态链接库，其他模块可以调用此库里面的内容。我们在web项目中的dll也是类似的

桃扇骨/ 2022年03月06日 19:36/ 0 赞/ 231 阅读

相关 vue 中用法

1.v-for和data属性 <li v-for="(item, index) in message" v-on:click="addClassFun(inde

我不是女神ヾ/ 2021年12月03日 15:07/ 0 赞/ 444 阅读

相关【webpack】中DllPlugin用法

首先准备需要打包的库 webpack.dll.js const webpack = require('webpack') const path = requ

小咪咪/ 2021年10月26日 16:26/ 0 赞/ 341 阅读