webpackでビルドするときHTMLファイルだけ圧縮されないようにする

結論

1. html-loaderのoptionsにminimize: falseを追加する
2. html-webpack-pluginのオプションminifyにfalseを追加する

これでproduction modeでもHTMLファイルは圧縮されなくなります。

module.exports = {
  module: {
    rules: [
      {
        test: /\.ejs/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: false, // 追加
            },
          },
          {
            loader: "ejs-plain-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/templates/index.ejs",
      filename: "index.html",
      minify: false, // 追加
    }),
  ],
};

動作確認環境

• Node.js v16.13.0

{
  "devDependencies": {
    "ejs-plain-loader": "^1.4.1",
    "html-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1"
  }
}

経緯

納品後お客さんの方でHTMLファイルを編集する、という案件がありました。

webpackはmodeをproductionに設定してビルドすると、ファイルが圧縮されて吐き出されます。普通に納品するだけなら特に問題ないですが、後に誰かがそのソースコードを編集する場合、圧縮したものを納品するのは少し不親切な気がします。というわけで、他のファイルは圧縮しつつもHTMLファイルのみを圧縮しない形でビルドしたい、と思ったわけです。

html-webpack-pluginのドキュメントには、

To disable minification during production mode set the minify option to false.

「production modeで圧縮を無効化したいときはminifyオプションをfalseにせえ！」

と書かれています。

というわけで、その通り追加してみました。

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/templates/index.ejs",
      filename: "index.html",
      minify: false, // 追加
    }),
  ],
};

そしていざビルド！してみたものの、HTMLは圧縮して吐き出されてしまいました。なんでだろう～と思いつつしばらく考え、もしや、と思ってhtml-loaderのドキュメントを見てみました。

minimize
Type: Boolean|Object Default: true in production mode, otherwise false
Tell html-loader to minimize HTML.

html-loaderにもminimizeのオプションがある！

というわけでこちらもfalseにしておく。

module.exports = {
  module: {
    rules: [
      {
        test: /\.ejs/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: false, // 追加
            },
          },
          {
            loader: "ejs-plain-loader",
          },
        ],
      },
    ],
  },
};

これでビルドすると、めでたくHTMLファイルのみ圧縮されずに吐き出されました。めでたし、めでたし。