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 }),
    }),
  ],
};

多重路徑

如果你需要多重路徑，請使用 npm 套件 glob-all 取代 glob，然後你可以使用這個語法

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

要過濾目錄，請參閱 glob-all 文件 在此。

選項

purgecss 中提供的選項 設定 也可以在 webpack 外掛中使用，但 css 和 content 選項除外。

• 路徑

使用 webpack 外掛時，你可以透過提供一個檔案名稱陣列來指定 purgecss 應分析的內容。這些檔案可以是 html、pug、blade 等檔案。你也可以使用像 `glob` 或 `glob-all` 等模組來輕鬆取得檔案清單。

你可能需要將 `{ noDir: true }` 作為選項傳遞給 `glob.sync()`，因為 `glob.sync` 會比對外掛無法運作的目錄。

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` 時，所有移除的選擇器都會以 `purged` 的形式新增到 統計資料 中。