webpack.DllPlugin和webpack.DllReferencePlugin静态资源预编译插件

最新推荐文章于 2024-08-21 09:26:53 发布

前端_Logic

最新推荐文章于 2024-08-21 09:26:53 发布

阅读量8.7k

点赞数 2

文章标签： DllPlugin webpack 静态资源预编译

本文链接：https://blog.csdn.net/lx376693576/article/details/77883603

版权

本文介绍了webpack的DllPlugin和DllReferencePlugin，用于预编译第三方NPM包，提高项目启动和开发时的编译速度。通过创建webpack.dll.config.js，配置DllReferencePlugin，并在index.html引入dll.js，然后在package.json添加预编译指令，即可实现。虽然依赖更新需要手动运行dll，但可以通过autodll-webpack-plugin自动化处理，不过该插件在webpack 4+中存在兼容问题。

摘要由CSDN通过智能技术生成

现在因为有HMR局部热更新，所以dllPlugin这两个插件用得少了，不过还是记录一下配置方法，可能以后会再次使用。
这两个插件可以对第三方NPM包预编译，生成*.dll.js，在项目启动和开发中不停的反复Ctrl+S的时候，webpack就不需要每次都重新编译那些固定不变的NPM包了，大大提升编译速度。

1.

新建一个webpack.dll.config.js ：
(我是创建在根目录下的)

const path = require("path");
const webpack = require("webpack");
const pkg = require('./package.json'); // 引入package.json
module.exports = {
    entry: {
        vendor: Object.keys(pkg.dependencies)