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

Question

TL; DR在底部。

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

My 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'，它主要查找元素的数据属性并绑定datepickers，工具提示，但也提供一些实用功能，如清理字符串，格式化字符串作为钱等

3. 应用程序/ *。min.js

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

我是Webpack新手

我已经看了几个关于它的视频教程，我可以看到它很强大，可以帮助我进一步学习JavaScript（阅读：使用更高级的结构和ES2015）。 我还阅读了Webpack教程，但无法找到如何使其适用于我的结构。

所以问题是：

TL; DR

如何使用Webpack在我的应用程序中使用全局（应用程序范围）和特定于页面的JavaScript，并让他们使用第三方供应商（如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）