web-dev-qa-db-ja.com

Webpack：複数のJavaScriptファイルを1つの出力ファイルにバンドルするにはどうすればよいですか？

main.jsとapp.jsの2つのファイルがあるとします。 Webpackを使用して両方を1つのファイルにバンドルするにはどうすればよいですか：bundle.js？

javascriptwebpackbundling-and-minification
8
Rish

webpackエントリファイルであるentry.jsを1つ作成し、この中に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');

これらの2つのファイルが相互に依存している場合、これを依存関係ツリーに反映し、たとえばmain.jsではなくapp.jsにentry.jsを要求すると便利です。

13
c0l3

Webpack-concat-pluginを使用できます。

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

1
Ankur

エントリの配列を渡すことができます。

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

また、それらを CLIオプション として渡すこともできます。

webpack ./main.js ./app.js --config=webpack.config.js
0
Rodrigo Boniatti