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

Question

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

Answer 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

Answer 2

您可以使用 webpack-concat-plugin。

Answer 3

您可以传递一组条目：

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

此外，您可以将它们作为 CLI option:

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

Webpack: How do I bundle multiple javascript files into a single output file?