Webpack

ヒント

Webpackの設定でWebpackプラグインを直接使用するか、Webpack PostCSSローダーを使用している場合は、PostCSSプラグインを使用できます。

インストール

npm i purgecss-webpack-plugin -D

使用法

mini-css-extract-plugin と一緒に使用する場合

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");

const PATHS = {
  src: path.join(__dirname, "src"),
};

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          test: /\.css$/,
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ],
};

複数のパス

複数のパスが必要な場合は、globの代わりにnpmパッケージglob-allを使用すると、この構文を使用できます

new PurgeCSSPlugin({
  paths: glob.sync([
    // ...
  ])
}),

ディレクトリをフィルタリングするには、glob-allのドキュメントのこちらを参照してください。

オプション

purgecssで利用可能なオプションは、設定にも、cssおよびcontentオプションを除き、webpackプラグインで利用できます。

• paths

webpackプラグインを使用すると、purgecssで分析するコンテンツをファイル名の配列で指定できます。これらは、html、pug、bladeなどのファイルです。globまたはglob-allのようなモジュールを使用して、ファイルのリストを簡単に取得することもできます。

glob.sync()がプラグインで操作できないディレクトリに一致するため、glob.sync()のオプションとして{ noDir: true }を渡す必要があるかもしれません。

const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob");
const PATHS = {
  src: path.join(__dirname, "src"),
};

// In the webpack configuration
new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

コンパイルのたびに（例：--watchを使用する場合）パスのリストを再生成する場合は、次の例のように、pathsオプションに関数を渡すこともできます。

new PurgeCSSPlugin({
  paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

• only

onlyオプションを使用して、purgecss-webpack-pluginにチャンク名を指定できます

new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
  only: ["bundle", "vendor"],
});

• safelist

pathsオプションと同様に、このオプションに関数を定義することもできます。

function collectSafelist() {
  return {
    standard: ["safelisted", /^safelisted-/],
    deep: [/^safelisted-deep-/],
    greedy: [/^safelisted-greedy/],
  };
}

// In the webpack configuration
new PurgeCSSPlugin({
  safelist: collectSafelist,
});

• rejected

このオプションがtrueに設定されている場合、削除されたすべてのセレクターはStats Data にpurgedとして追加されます。