Webpack：如何将多个 javascript 文件捆绑到一个输出文件中？答案

【问题标题】：Webpack: How do I bundle multiple javascript files into a single output file?Webpack：如何将多个 javascript 文件捆绑到一个输出文件中？
【发布时间】：2017-07-14 07:59:40
【问题描述】：

假设我有两个文件，main.js 和 app.js；如何使用 Webpack 将它们捆绑到一个文件中：bundle.js？

【问题讨论】：

标签： javascript webpack bundling-and-minification

【解决方案1】：

创建一个 entry.js 这是您的 webpack 入口文件，并在此 require 您的附加文件

webpack.config.js

module.exports = {
   entry: './src/entry.js'
   ...
};

/src/entry.js

// new syntax
import './main.js';
import './app.js';

// or old syntax
require('./main.js');
require('./app.js');

如果这两个文件相互依赖，最好在你的依赖树中反映这一点，并且在你的app.js 中需要main.js 而不是在entry.js 中，例如

【讨论】：

我有一个文件夹，其中包含 15 个第三方 js 文件（jQuery 插件或 javascript 库），我想将它们捆绑到一个文件中。这些文件都没有“导出”自己以使自己可用于从单个文件“导入”——它们目前只是在index.html 文件的脚本标签中引用。如何使用 webpack 将所有这些第三方文件捆绑到一个文件中？
user1063287 您可以尝试使用github.com/webpack-contrib/script-loader 完成此任务
@c0l3 ...aaand 它不再维护。
如存储库中所写。在大多数情况下，您可以使用 raw-loader 替换该功能。有关示例，请参阅脚本加载器自述文件

【解决方案2】：

你可以传递一个条目数组：

module.exports = {
   entry: ['./main.js', './app.js'],
   ...
};

另外，您可以将它们作为CLI option 传递：

webpack ./main.js ./app.js --config=webpack.config.js

【讨论】：

【解决方案3】：

你可以使用 webpack-concat-plugin。

https://www.npmjs.com/package/webpack-concat-plugin#publicpath-stringboolean-default-webpacks-publicpath

【讨论】：