WebpackでCSSファイルをminify（ミニファイ）する方法

公開日：2026-03-23

フロントエンド

Webpack

今回は、CSSファイルを直接importしてMiniCssExtractPluginで出力している場合のminify設定方法を解説します。

Webpackでは、mode: ‘production’を設定すれば、JavaScriptのバンドルファイルは自動でminify（ファイルサイズの最適化）されます。

また、sass-loaderでSassをコンパイルしてCSSを別ファイルとして出力している場合や、HtmlWebpackPluginを導入している場合は、CSSやHTMLにも追加設定なしでminifyが効いています。

しかし、CSSファイルを直接importしてMiniCssExtractPluginで出力している場合は、別途設定が必要です。この記事では、その設定方法をステップごとに解説します。

※本記事は、Webpack 5を使用した環境を前提としています。

CSSファイルをminifyする方法

以下のように、CSSファイルを直接importして、MiniCssExtractPluginで別ファイルとして出力している場合、本番ビルドを実行しても、デフォルトでCSSファイルに関してはminifyされません。

const path = require("node:path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = ({ useHash } = {}) => ({
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: useHash ? "[name].[contenthash].js" : "[name].js",
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: (pathData) => {
        return pathData.chunk.name === "main"
          ? useHash
            ? "style.[contenthash].css"
            : "style.css"
          : useHash
            ? "[name].[contenthash].css"
            : "[name].css";
      },
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      inject: "body",
      chunks: ["main"],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset/resource",
        generator: {
          filename: useHash
            ? "img/[name].[contenthash][ext]"
            : "img/[name][ext]",
        },
      },
      {
        test: /\.html$/,
        use: ["html-loader"],
      },
    ],
  },
});

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common({ useHash: true }), {
  mode: "production",
});

import { sayHello } from "./sub";
import "./style.css";

sayHello("Hi, Webpack");

※ただし、sass-loaderでSassをCSSにコンパイルしている場合は、mode: ‘production’のときsass-loaderの機能によってCSSが圧縮（minify）されるため、別途設定は不要です。

上のような場合でもCSSファイルをminifyするには、別途設定を追記してあげる必要があります。

まずは、CSSを最適化するためのパッケージCssMinimizerPluginをインストールします。

npm install css-minimizer-webpack-plugin --save-dev

続いて、インストールしたプラグインを読み込み、optimization.minimizerセクションに追加します。

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = merge(common({ useHash: true }), {
  mode: "production",
  optimization: {
    minimizer: [
      // デフォルトの minimizer（TerserPluginなど）をそのまま継承
      `...`,
      // CSS最適化プラグインを追加
      new CssMinimizerPlugin(),
    ],
  },
});

1点、上の記述で重要なこととして、`….`の記載を忘れないようにする必要があります。

optimization.minimizerは自分で設定を書いた瞬間に、WebpackがデフォルトでJavaScriptのminifyに使っているTerserPluginが上書きされて無効になってしまいます。

しかし、`…`を先頭に書くことで、デフォルトの設定を引き継ぎつつCssMinimizerPluginを追加できます。

これで、本番ビルドを実行すると、CSSファイルに関してもminifyできていることが確認できます。