javascript - 如何使用 webpack4 正确拆分常见依赖项-6ren

javascript - 如何使用 webpack4 正确拆分常见依赖项

转载作者：行者123 更新时间：2023-11-30 09:24:37

25

4

我在配置 webpack4 以正确捆绑共享依赖项时遇到困难。

我的应用程序中有两个页面(Page1 和 Page2)。两者都需要 bootstrap、jquery 以及名为 core 的自定义 JavaScript 应用。

第 2 页需要相同但还需要一个名为 my-app 和 lodash 的自定义 JavaScript 应用程序。

因为我的 core 应用程序将包含在所有页面中，所以我想在同一个包中包含 jquery 和 bootstrap。

由于 lodash 仅对运行 my-app 的页面是必需的，因此我想将该依赖项包含在 my-app 包中。

所以我这样设置我的应用程序:

webpack.config.js

const path = require('path');
const webpack = require('webpack');


module.exports = {
  entry: {
    'core': './src/core/index.js',
    'my-app': './src/my-app/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery',
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
  ],
  mode: 'development',
}

page1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page1</title>

    <script src="dist/core.bundle.js"></script>
  </head>
  <body>
    <h1>Page1</h1>
    <span id="test"></span>
  </body>
  <script>
    $(document).ready(function() {
      $('#test').text('jQuery Works!');
    });
  </script>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page1</title>

    <script src="dist/core.bundle.js"></script>
    <script src="dist/my-app.bundle.js"></script>

  </head>
  <body>
    <h1>Page2</h1>
    <span id="test"></span>
  </body>
  <script>
    $(document).ready(function() {
      $('#test').text('jQuery Works!');
    });
  </script>
</html>

(完整项目:https://github.com/LondonAppDev/webpack-split-example)

当我运行 npx webpack 时，它会创建 core.bundle.js 和 my-app.bundle.js，但是这两个都包括 jquery。

是否可以将所有“全局”依赖项放入 core.bundle.js 中？

最佳答案

这里只需要记住一件事，使用 webpack 4，您不会将 vendor 脚本作为入口添加到您的 webpack.config 中，而只是将真正的入口脚本添加到您的应用程序中。WP 将使用默认设置为您的应用创建优化的捆绑输出。

您必须将 vendor 缓存组添加到您的配置中，以便将 jQuery、Lodash、Bootstrap、Popper 提取到一个单独的包中:

 optimization: {
    splitChunks: {
      cacheGroups: {       
        vendor: {
          test: /node_modules/,
          name: "vendor",
          chunks: "all", 
          enforce: true
        }
      }
    }
  },

关于javascript - 如何使用 webpack4 正确拆分常见依赖项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49652900/

25

4

0

文章推荐： javascript - 字符串中的单个反斜杠

文章推荐： java - 如何全局改变Swing JTextFields的ActionMap？

文章推荐： machine-learning - torch.nn.DataParallel 在 pytorch 中不起作用

文章推荐： python - 在朴素贝叶斯中获取特征重要性

dependencies - gobject 依赖 glib 还是 glib 依赖 gobject？
我在 gobject 上阅读了一个维基百科页面，上面写着， Depending only on GLib and libc, GObject is a cornerstone of GNOME and
wpf - 依赖属性依赖于另一个
如何注册一个依赖属性，其值是使用另一个依赖属性的值计算的？由于 .NET 属性包装器在运行时被 WPF 绕过，因此不应在 getter 和 setter 中包含逻辑。解决方案通常是使用 Proper
ActionBarSherlock maven 依赖
我一直在尝试将 ActionbarSherlock maven 依赖项添加到我的项目中 com.actionbarsherlock library 4.2.0 在我的 po
oop - 依赖/依赖是什么意思？
http://tutorials.jenkov.com/ood/understanding-dependencies.html#whatis说(强调我的): Whenever a class A us
wpf - 依赖/附加属性如何在内部工作以及值存储在哪里？
我对所有这些魔法有点不清楚。据我了解，依赖属性是从 DependencyObject 继承的，因此存储值: 如果分配了值(在本地字典中)，则在实例本身中或者如果未指定值，则从指向父元素的链接中获取
Twilio RestSharp 依赖
我刚刚更新了在 ASP.NET Framework 4.5.2 版上运行的 MVC Web 应用程序。我正在使用 Twilio 发送 SMS 消息: var twilio = new TwilioRe
java - Spring 依赖
我刚刚发现了一件令人生畏的事情。 spring 依赖坐标有两个版本。项目依赖于 spring mvc 和 spring flow。有两组并行的依赖项。 Spring MVC 具有以下方案的依赖项
Maven 依赖 picocontainer
我正在尝试包含的 maven 依赖项 org.jacorb jacorb 2.3.1 依赖已解决，但它导致另一个依赖 picocontainer 出现问题: [ERROR
Haskell 依赖 hell
我正在尝试在 Haskell 项目中包含特定版本的库。该库是住宿加早餐型的(用于 martix 操作)，但我需要特定的 0.4.3 版本，该版本修复了乘法实现的错误。所以，我的 stack.yaml
iphone - 依赖 UIPickerView
有谁知道如何制作依赖的 UIPickerView.例如，当我选择组件一的第 2 行时，组件二的标题会发生变化吗？我在互联网上查找过，没有真正的答案，我尝试过使用 if 和 switch 语句，但它们
Maven WAR 依赖
我正在编写一个用于验收测试的项目，由于各种原因，这依赖于另一个打包为 WAR 的项目。我已成功使用 maven-dependency-plugin 解压 WAR，但无法让我的项目包含解压的 WEB-I
Django，依赖 session
或多或少我在 session 上大量构建我的网站(特别是重定向用户等)，我很好奇这是否是一种危险的做法。禁用浏览器 cookie 保存的用户的大致比例是多少？我愿意接受任何建议:) 谢谢最佳答案 s
scala - 依赖 future
开始玩 Scala futures，我被依赖的 futures 困住了。让我们举个例子。我搜索地点并获得 Future[Seq[Place]]。对于这些地点中的每一个，我搜索最近的地铁站(该服务返回
Django，依赖 session
或多或少我在 session 上大量构建我的网站(特别是重定向用户等)，我很好奇这是否是一种危险的做法。禁用浏览器 cookie 保存的用户的大致比例是多少？我愿意接受任何建议:) 谢谢最佳答案 s
c - GLIBC 依赖
我有一个二进制文件，需要一些 *.so 文件才能执行。现在，当我尝试在一些旧机器上执行它时，它会显示 /lib/libc.so.6: version `GLIBC_2.4' not found 如何将
javascript - DyGraph 依赖
我尝试使用 Dygraph 来表示图表，我在 https://github.com/danvk/dygraphs 中找到了代码，但是它有太多的依赖文件，我觉得很烦人。是否有一个文件可以容纳所有必需的
javascript - Jasmine 依赖
我正在处理一个 javascript 文件，该文件 a) 声明一个具有函数的对象，并且 b) 使用它期望在外部声明的散列调用该对象的 init 函数。我的 Jasmine 规范提示它找不到哈希，因为它
javascript - Angular 依赖
最近我一直在学习 Angular 并且进展顺利，但是关于依赖注入(inject)的一些事情我仍然不清楚。是否有任何理由在我的 app.js 文件中声明我的应用程序的其他部分(服务、 Controll
php - 依赖 "mysql_insert_id"
考虑一个名为 foo 的表，它有 id (PRIMARY & AUTO_INCREMENT) 列。我正在向该表中插入一行，挑战从此时开始。 $db->query("INSERT INTO `foo`
javascript - 依赖/级联下拉菜单
我正在使用级联下拉 jquery 插件。 (https://github.com/dnasir/jquery-cascading-dropdown) 我有两个下拉菜单。 “客户端”和“站点”。根据您

首页

博学

6Ren·AI

商城

javascript - 如何使用 webpack4 正确拆分常见依赖项