webpackで、JavaScriptを個々のファイルのままminifyする

あんまりこんなことやらないかもしれませんが、webpackでJavaScriptを結合するのではなく、個々のファイルの単位のままminifyだけしてみようと思いまして。

で、こちらを参考にしてやってみました。

Wildcards in entry points · Issue #370 · webpack/webpack · GitHub

別に、このissueの中でこの目的のことを直接やっているわけではないですが。

globを使う

それで、どうするかというわけですが、globを使います。

インストール。

$ npm install --save-dev glob

ソースコードが「src/scripts」配下にあったとして

$ find src -type f
src/scripts/sub/sub2.js
src/scripts/sub/sub1.js
src/scripts/sub/subsub/subsub1.js
src/scripts/sub/subsub/subsub2.js
src/scripts/main1.js
src/scripts/main2.js

これを「dist/scripts」配下で公開するとします。

webpackの設定（webpack.config.js）に、こんな感じに書きました。
webpack.config.js

var path = require("path");
var webpack = require("webpack");
var glob = require("glob");

var srcDir = "./src/scripts/";

var scripts = {};
var scriptFiles = glob.sync("./src/scripts/**/*.js");
for (var i in scriptFiles) {
    var script = scriptFiles[i];
    scripts[script.slice(srcDir.length, -3)] = script;
}

module.exports = {
    cache: true,
    entry: scripts,
    output: {
		path: path.join(__dirname, "dist/scripts"),
		publicPath: "dist/scripts/",
		filename: "[name].js",
		chunkFilename: "[chunkhash].js",
        // sourceMapFilename: "[file].map"
    },
    devtool: "#source-map",
    plugins: [
        new webpack.DefinePlugin({
			"process.env": {
				// This has effect on the react lib size
				"NODE_ENV": JSON.stringify("production")
			}
		}),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ]
};

globで探して

var glob = require("glob");

var srcDir = "./src/scripts/";

var scripts = {};
var scriptFiles = glob.sync("./src/scripts/**/*.js");
for (var i in scriptFiles) {
    var script = scriptFiles[i];
    scripts[script.slice(srcDir.length, -3)] = script;
}

そのままentryに放り込みます、と。

module.exports = {
    cache: true,
    entry: scripts,

これで、各スクリプトの単位のままminifyができました。

Hash: df64abc49e71c2fc3801
Version: webpack 1.12.2
Time: 206ms
                    Asset       Size  Chunks             Chunk Names
             main1.js.map    3.61 kB       0  [emitted]  main1
                 main1.js  288 bytes       0  [emitted]  main1
              sub/sub1.js  286 bytes       2  [emitted]  sub/sub1
              sub/sub2.js  286 bytes       3  [emitted]  sub/sub2
    sub/subsub/subsub1.js  292 bytes       4  [emitted]  sub/subsub/subsub1
    sub/subsub/subsub2.js  292 bytes       5  [emitted]  sub/subsub/subsub2
                 main2.js  288 bytes       1  [emitted]  main2
             main2.js.map    3.62 kB       1  [emitted]  main2
          sub/sub1.js.map    3.63 kB       2  [emitted]  sub/sub1
          sub/sub2.js.map    3.63 kB       3  [emitted]  sub/sub2
sub/subsub/subsub1.js.map    3.69 kB       4  [emitted]  sub/subsub/subsub1
sub/subsub/subsub2.js.map    3.69 kB       5  [emitted]  sub/subsub/subsub2