Webpack 壓縮 CSS 的方法

Webpack 是一個流行的 JavaScript 模塊打包工具，它可以將多個模塊捆綁成一個文件，以減少頁面加載時間，除了 JavaScript，Webpack 還可以處理 CSS 文件，在大型項目中，CSS 文件可能會變得非常大，因此壓縮它們以減小文件大小是很有必要的。

Webpack 如何壓縮 CSS 呢？Webpack 并沒有內(nèi)置的直接壓縮 CSS 的功能，你可以使用一些插件來實現(xiàn)這個功能。cssnano 是一個流行的 CSS 壓縮工具，它可以幫助你減小 CSS 文件的大小。

要使用cssnano 來壓縮 CSS，你首先需要安裝它，在你的項目根目錄下運行以下命令來安裝cssnano：

npm install cssnano --save-dev

你需要在你的 Webpack 配置文件中添加一個新的 loader 來處理 CSS 文件，在你的webpack.config.js 文件中添加以下內(nèi)容：

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'cssnano-loader',
            options: {
              // 這里可以配置 cssnano 的壓縮選項
            }
          }
        ]
      }
    ]
  }
};

在這個配置中，css-loader 會處理 CSS 文件，并將它們轉(zhuǎn)換為 CommonJS 模塊。cssnano-loader 會使用cssnano 來壓縮這些模塊。style-loader 會將壓縮后的 CSS 插入到頁面中。

當你運行 Webpack 時，它會自動壓縮你的 CSS 文件，你可以通過查看生成的 CSS 文件來驗證壓縮結(jié)果。

這只是一個基本的示例，在實際項目中，你可能需要更詳細的配置來處理不同的 CSS 文件和壓縮需求，這個示例應(yīng)該能夠幫助你開始使用 Webpack 來壓縮 CSS。