用Webpack5的css-loader配置不同loader处理不同css模块的完整实例

2023-12-24 14:49:48

CSS模块化：使用Webpack 5和css-loader掌控CSS

在构建现代Web应用程序时，管理CSS代码是一项艰巨的任务。传统上，CSS被内联在HTML中或通过外部CSS文件包含，这会导致样式冲突和可维护性差。CSS模块化 应运而生，提供了一种将CSS样式封装成独立模块的方法，从而显著改善CSS管理。

什么是CSS模块化？

CSS模块化是一种利用Webpack构建过程将CSS样式封装成独立模块的技术。它允许我们将CSS样式与组件逻辑分离，从而获得更清晰、更可控的代码结构。每个CSS模块只能作用于其特定的组件，消除样式冲突的风险。

Webpack 5中的CSS模块化

Webpack 5中的css-loader提供了对CSS模块化的强大支持。它允许我们配置不同的loader，以针对不同类型的CSS模块执行特定的操作。例如，我们可以使用css-loader处理常规CSS文件，并使用style-loader将样式注入HTML文档。

如何使用Webpack 5的css-loader实现CSS模块化

下面是一个使用Webpack 5和css-loader实现CSS模块化的完整示例：

1. 安装依赖项

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

2. 创建Webpack配置文件

在项目根目录创建webpack.config.js文件，内容如下：

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

3. 创建入口文件

在项目根目录创建index.js文件，内容如下：

import './src/styles/main.css';

console.log('Hello World!');

4. 创建CSS文件

在项目根目录创建src/styles/main.css文件，内容如下：

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  font-size: 2em;
  margin-bottom: 1em;
}

p {
  color: #666;
  font-size: 1.2em;
  line-height: 1.5em;
}