javascript - 如何将 Webpack 4 SplitChunksPlugin 与 HtmlWebpackPlugin 结合使用用于多页面应用程序？-6ren

javascript - 如何将 Webpack 4 SplitChunksPlugin 与 HtmlWebpackPlugin 结合使用用于多页面应用程序？

转载作者：行者123 更新时间：2023-12-02 23:17:22

25

4

我正在尝试利用 SplitChunksPlugin 为 MPA 中的每个页面/模板生成单独的包。当我使用 HtmlWebpackPlugin 时，我会为每个页面获取一个 html 文件，其中包含指向正确包的脚本标记。太棒了!然而，我遇到的问题是我的 vendor 文件。我希望单独的 html 文件仅指向他们需要的 vendor 包。当 SplitChunksPlugin 创建多个 vendor 包时，我无法让每个单独的 html 文件指向正确的 vendor 包。生成的 bundle 是:

home.bundle.js
product.bundle.js
cart.bundle.js
vendors~cart~home~product.bundle.js
vendors~cart~product.bundle.js

所以基本上主页模板应该引用 home.bundle.js、vendors~cart~home~product.bundle.js，而不是第二个 vendor 包。只有购物车和产品模板应引用两个 vendor bundle 。我正在利用 HtmlWebpackPlugin 的 chunks 选项，但无法让它提取正确的 vendor 包，除非我明确引用它的名称，如下所示:

chunks: ['vendors~cart~home~product.bundle','home']

但这有点违背了动态渲染脚本标签的目的。我尝试创建一个 vendor 入口点，但这将我的所有 vendor 集中在一起。我缺少一些简单的配置吗？

我的 webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        home: './src/js/page-types/home.js',
        product: './src/js/page-types/product.js',
        cart: './src/js/page-types/cart.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/js')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new Visualizer(),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            chunks: ['vendors','home']
        }),
        new HtmlWebpackPlugin({
            filename: 'product.html',
            chunks: ['vendors','product']
        }),
        new HtmlWebpackPlugin({
            filename: 'cart.html',
            chunks: ['vendors~cart~product','cart']
        }),
    ], ...

我的js模块:

/* home.js */
    import jQuery from 'jquery';
    import 'bootstrap';

购物车和产品也引用了react库:

/* cart.js */
    import jQuery from 'jquery';
    import 'bootstrap';
    import React from 'react';
    import ReactDOM from 'react-dom';

/* product.js */
    import jQuery from 'jquery';
    import 'bootstrap';
    import React from 'react';
    import ReactDOM from 'react-dom';

示例 html 输出 home.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="home.bundle.js"></script></body>
</html>

最佳答案

使用 html-webpack-plugin 的 version4(现在处于测试版)，并且只在 chunks 选项中包含入口 chunk。

npm i -D html-webpack-plugin@next

和

module.exports = {
    new HtmlWebpackPlugin({
        filename: 'home.html',
        chunks: ['home']
    }),
    new HtmlWebpackPlugin({
        filename: 'product.html',
        chunks: ['product']
    }),
    new HtmlWebpackPlugin({
        filename: 'cart.html',
        chunks: ['cart']
    }),
};

这将自动包含相关 block 。

关于javascript - 如何将 Webpack 4 SplitChunksPlugin 与 HtmlWebpackPlugin 结合使用用于多页面应用程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50803260/

25

4

0

文章推荐： wordpress - 更改WordPress的登录标签， "Username"

文章推荐：使用 JDK9 获取 java.io.Serializable 时，Javassist NotFoundException

Excel - 结合 SUMPRODUCT
我有一张 Excel 表格，用于更新玩家评分。播放器配售初始化 1 2 3 4 金融评级一个 1 2.0 1.000 0.018 0.016 0.014 2.007 D 2 -2.0 54.5
qt - 结合 QAbstractItemModels
我有一个 map = std::map ，其中 myItemModel继承QAbstractItemModel . 我现在要合并所有 myItemModel合一myItemModel (其他所有元素模
r - do.call 结合 "::"
我大量使用“do.call”来生成函数调用。例如: myfun <- "rnorm"; myargs <- list(n=10, mean=5); do.call(myfun, myargs); 但是
Scala future 结合
想象一下 InputStream 的以下变体: trait FutureInputStream { //read bytes asynchronously. Empty array means E
结合 C 和汇编代码
这是我的 C 代码: #include void sum(); int newAlphabet; int main(void) { sum();
Jquery:结合 "each"函数选择类后的所有内容
我只是想选择类“.last”之后的每个元素。 HTML: 1 2 Jquery
C# ？？结合？ : question
我正在为一个项目构建一个 XML 反序列化器，我经常遇到这种类型的代码情况: var myVariable = ParseNDecimal(xml.Element("myElement")) == n
SQLite:结合 OR 和 AND
这是来自 Selecting the highest salary 的继续问题假设有一个表 'wagetable' name lowhours highhours wage pri
c - 结合 if 语句来设置值限制
我正在为我的程序创建一个战舰程序；该程序运行良好，但我试图确保当用户将坐标超出范围时，程序会说他们输入的坐标不正确。这是代码: #include #include void
结合 GetLastError 的值和自定义错误消息
我有一个函数，它为每种情况返回不同的 DWORD 值，如果出现错误。所以我有以下定义: #define ERR_NO_DB_CONNECTION 0x90000 #define ERR_DB_N
结合.net框架在C#派生类中触发基类事件及实现接口事件
在派生类中引发基类事件以下简单示例演示了在基类中声明可从派生类引发的事件的标准方法。此模式广泛应用于 .NET Framework 类库中的 Windows 窗体类。在创建可用作其他类的基类的类时，应
perl 结合 map 和每个
我只是想知道这是否可能: use Modern::Perl; my @list = ('a' .. 'j'); map { func($_) } each(@list); sub func { m
excel - 结合 IF 函数和 OR 函数以允许多个条件
我一直在使用 =IF(L2="","Active",IF(K2I2,"Late"))) 有效，但现在我需要检查 F 上的多个条件专栏我试过了 OR 函数 =IF(OR(F2="Scheduled"
FFmpeg - 结合 2 个命令
我有 2 个命令，如下所示。在视频中添加介绍图片 ffmpeg -y -loop 1 -framerate 10 -t 3 -i intro.png -i video.mp4 -filter_com
vba - 结合 VBA 和公式来检查独特的输出
好的，我有这个公式可以根据名字和姓氏列表生成用户名。现在，虽然这可行，但我希望单元格改为引用我自己的 VBA 函数。但是，由于代码少得多，我仍然想使用原始公式。我有这个公式: =SUBSTITUTE
haproxy - 结合 HAProxy 统计数据？
我有两个 HAProxy 实例。两个实例都启用了统计信息并且工作正常。我正在尝试将两个实例的统计信息合并为一个，以便我可以使用单个 HAProxy 来查看前端/后端统计信息。我试图让两个 hapro
typescript - switchMap 结合 mergeMap
我有一个 Observable，其中每个新值都应该引起一个 HTTP 请求。在客户端，我只关心最新的响应值；但是，我希望每个请求都能完成以进行监控/等。目的。我目前拥有的是这样的: function
javascript - 如何将延迟加载与 TinyMCE 结合？
我的网站上有 TinyMCE 插件。在 TinyMCE 插件的 textarea 中添加图像时，我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载，其中 src 图像是灰色背景。根据用户
r - 将重叠间隔与 lubridate 结合
我希望合并润滑间隔，以便如果它们重叠，则从内部第一个时间获取最小值和从内部最后一个时间获取最大值并总结以创建一个跨越整个时间段的新间隔。这是一个reprex: library(lubridate, w
html - 结合 flex 和绝对定位时的混淆
我有一个应用程序，它本质上是一个页眉、主要内容和一个始终可见的页脚。页脚可以改变大小，我想在页脚上方的主内容面板上放置一些工具。主要布局是用 flex 完成的，我阅读文档的理解是绝对定位通过相对于最近

首页

博学

6Ren·AI

商城

javascript - 如何将 Webpack 4 SplitChunksPlugin 与 HtmlWebpackPlugin 结合使用用于多页面应用程序？