JavaScript（ES5）・CSSファイルを結合・ミニファイする方法

Question

JavaScript（ES5）・CSSファイルを結合・ミニファイする方法

複数のJavaScriptとCSSファイルを、一つのファイルに結合して、さらにはミニファイしたいと考えています。
以下のようなイメージです。

a.js
b.js
c.js
　↓
bundle.js　（こちらのファイルに各ファイルのコンテンツが書き込まれミニファイされる）

a.css
b.css
c.ss
　↓
bundle.css　（こちらのファイルに各ファイルのコンテンツが書き込まれミニファイされる）

前提として、入力となるJavaScriptは昔ながらのES5という制約があります。

以下のページを参考に、Webpackでの実現を試みたところ、cssに関しては結合とミニファイを実現できましたが、jsに関しては上手くできませんでした。

参考：https://knooto.info/webpack-simple-minify/

WebpackはES6のファイルたちを、entryで指定したjsファイル内で、依存ファイルのimportによりまとめ上げるという流れかと思いますが、そもそも入力はES5にしたいので、自分が求める結果とは異なり、どのように実現すれば良いのか途方にくれています。

ファイルを結合してミニファイルするという、非常にシンプルな目的なので、きっと何かしら、やり方があるのではないかと考えていますが、

Webpackの記事のほとんどが、ES6のようなモダンなものを前提に取り上げられているので、自分が要求する知見に辿り着けないでいます。

有識者の方おりましたら、ご回答頂ければ有難く思います。

Answer 1

WebpackはES6のファイルたちを、entryで指定したjsファイル内で、依存ファイルのimportによりまとめ上げるという流れかと思いますが、

Webpackでもmodule.exportsとrequire()を使った、ES Modules以前のCommonJS形式でファイルどうしの連携を行うことも可能です。

Comments

[Ison]

ご回答ありがとうございます。

質問の仕方が悪かったのかもしれないですが、既存のjsファイルに改変を加える事なく、ファイルを結合・ミニファイをしたかったので、module.exportsやrequireの活用による実現は、今回のケースでは使えないのではないかと思いました。

[maisumakun]

> 既存のjsファイルに改変を加える事なく、ファイルを結合・ミニファイをしたかった

Webpackの一般的な使い方ではありませんが、webpack-merge-and-include-globallyというプラグインを使えば対応できるようです。

https://www.npmjs.com/package/webpack-merge-and-include-globally

[Ison]

ご返信有難うございます。無事解決に至りました。

Answer 2

自己解決したので、解決方法を記します。

NodeJSで、webpackをインストールします。

必要なプラグインは以下の通りでした。

npm install --save-dev webpack-merge-and-include-globally
npm install --save-dev uglify-js
npm install --save-dev clean-css

以下のように、「webpack-merge-and-include-globally」プラグインを使い、ファイルの結合を実現できます。
さらに、同プラグインのtransformでミニファイのプラグインを掛け合わせる事で、結合・ミニファイを同時に実行することができました。

webpack.config.js

const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
const UglifyJs = require('uglify-js');
const CleanCSS = require('clean-css');

module.exports = {
  plugins: [
	new MergeIntoSingleFilePlugin({
		files: {
			"bundle.js": [
				'./public/a.js',
				'./public/b.js',
			],
			"bundle.css": [
				'./public/a.css',
				'./public/b.css',
			]
		},
		transform: {
			'bundle.js': code => UglifyJs.minify(code).code,
			'bundle.css': code => new CleanCSS({/*options*/}).minify(code).styles,
		}
	}),
  ],
  module: {
  },
}

参考リンク：
https://github.com/markshapiro/webpack-merge-and-include-globally

ご回答頂いた方、有難うございました。