本文目錄導(dǎo)讀：

1. 安裝必要的加載器
2. 配置 Webpack
3. 引入 CSS 文件
4. 運(yùn)行 Webpack
5. 優(yōu)化與壓縮

Webpack 4 優(yōu)化與配置：處理多個(gè) CSS 文件

Webpack 4 作為前端資源打包工具，能夠高效地處理 JavaScript、CSS 等文件，當(dāng)項(xiàng)目中有多個(gè) CSS 文件需要打包時(shí)，Webpack 4 同樣能夠輕松應(yīng)對(duì)，下面是如何配置 Webpack 4 以打包多個(gè) CSS 文件的方法。

安裝必要的加載器

需要安裝style-loader 和css-loader，這兩個(gè)加載器分別用于將 CSS 注入到 DOM 中和解析 CSS 文件，使用 npm 安裝：

npm install --save-dev style-loader css-loader

配置 Webpack

在 Webpack 的配置文件（通常是webpack.config.js）中，需要配置module.rules 來(lái)處理 CSS 文件，以下是一個(gè)基本的配置示例：

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配所有 CSS 文件
        use: [
          'style-loader', // 將 JS 字符串生成為 style 節(jié)點(diǎn)
          'css-loader'   // 解析 CSS 文件
        ]
      }
    ]
  }
  // ... 其他配置 ...
};

引入 CSS 文件

在 JavaScript 文件中，可以通過(guò)import 語(yǔ)句引入多個(gè) CSS 文件。

import './css/style1.css';
import './css/style2.css';
// 更多 CSS 文件...

運(yùn)行 Webpack

配置完成后，運(yùn)行 Webpack 即可將多個(gè) CSS 文件打包成一個(gè)文件，可以通過(guò)命令行工具或者構(gòu)建工具（如 Webpack Dev Server）來(lái)運(yùn)行 Webpack。

優(yōu)化與壓縮

為了提高生產(chǎn)環(huán)境的性能，通常需要對(duì)打包后的 CSS 文件進(jìn)行壓縮，可以使用mini-css-extract-plugin 和optimize-css-assets-webpack-plugin 插件來(lái)實(shí)現(xiàn)這一功能，首先安裝這兩個(gè)插件：

npm install --save-dev mini-css-extract-plugin optimize-css-assets-webpack-plugin
```然后在配置文件中進(jìn)行相應(yīng)的配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

// ... 其他配置 ...

plugins: [

new MiniCssExtractPlugin({

filename: '[name].css', // 輸出文件名

chunkFilename: '[id].css', // 非入口文件的輸出文件名

}),

new OptimizeCSSAssetsPlugin({}) // 壓縮 CSS 文件

],

// ... 其他配置 ...

};

```這樣，運(yùn)行 Webpack 后，多個(gè) CSS 文件會(huì)被打包并壓縮成一個(gè)或多個(gè)優(yōu)化后的 CSS 文件，通過(guò)以上步驟，我們可以輕松地使用 Webpack 4 打包多個(gè) CSS 文件，并進(jìn)行優(yōu)化和壓縮。