Webpack 中特定于页面的 JavaScript 以及第三方脚本和应用程序范围的脚本

Posted 2023-02-24

【中文标题】Webpack 中特定于页面的 JavaScript 以及第三方脚本和应用程序范围的脚本

【英文标题】：Page-specific JavaScript together with third-party scripts and application-wide scripts in Webpack

【发布时间】：2017-07-11 06:46:02

【问题描述】：

TL;DR 在底部。

我正在寻找一种使用 Webpack 的方法，就像我现在使用 Gulpfile 一样。

我的 Gulpfile 执行以下操作：

它将 bower 组件（如 jQuery、Air datepicker、MomentJS）Uglifying 到单个文件 (vendors.min.js) 中 它连接特定文件夹中的每个文件，Uglifying 内容并将其处理成另一个文件。 (lib.min.js) 它监视文件夹中新的/更改的文件，只获取更改的文件，将其修改并保存到文件夹中（这些是我的 app 文件，它们是特定于页面的，可以按需加载）。李>

所以现在我有 3 种类型的文件：

vendors.min.js

在我的应用程序的每个页面上加载。 这些可确保所有必需的第三方脚本在您需要时始终可用。

lib.min.js

也在每个页面上加载。 这是我的应用程序的'framework''Library'，它主要查找元素的数据属性并绑定日期选择器、工具提示，但也提供一些实用功能，如清理字符串、将字符串格式化为金钱等。

app/*.min.js

这些为我们的开发人员提供了编写页面特定 javascript 的地方。 它们仅在该页面上加载。

我是 Webpack 新手

我看过一些关于它的视频教程，我可以看到它很强大，可以帮助我进一步了解 JavaScript（阅读：使用更高级的结构和 ES2015）。 我也通读了 Webpack 教程，但找不到如何使它适用于我的结构。

所以问题是：

TL;DR

我如何使用 Webpack 在我的应用程序中拥有全局（应用程序范围）和页面特定的 JavaScript，并让它们使用第三方供应商（如 jQuery、MomentJS，通过 bower 或 npm 等）。

【参考方案1】：

每个页面都应该有这样的入口配置：

entry: 
    page1: ['./src/page1.js'],
    page2: ['./src/page2.js'],

输出如下：

output: 
    path: `$__dirname/app/`,
    filename: '[name].min.js',
,

然后使用 CommonsChunkPlugin 插件构建一个包含 jQuery、MomentJS 之类的全局文件

plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors.and.lib.min.js'),
]

（这是针对 webpack 版本 1）