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

Question

TL;DR 在底部。

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

我的 Gulpfile 执行以下操作:

1. 它将 bower 组件(如 jQuery、Air datepicker、MomentJS)丑化为单个文件 (vendors.min.js)
2. 它连接特定文件夹中的每个文件，将内容压缩并处理成另一个文件。 (lib.min.js)
3. 它监视文件夹中的新文件/更改文件，仅获取更改文件，将其变丑并将其保存到文件夹中(这些是我的 app 文件，它们是特定于页面的，可以加载到需求)。

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

1. vendors.min.js

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

2. lib.min.js

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

3. app/*.min.js

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

我是 Webpack 新手

我看过几个关于它的视频教程，我可以看到它很强大，可以帮助我进一步了解 JavaScript(阅读:使用更高级的结构和 ES2015)。 我还通读了 Webpack 教程，但找不到如何让它适用于我的结构。

所以问题是:

长话短说

我如何使用 Webpack 在我的应用程序中拥有全局(应用程序范围)和页面特定的 JavaScript，并让它们使用第三方 vendor (如 jQuery、MomentJS，通过 bower 或 npm 或其他东西)。

Answer 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 的)