Webpack 入门2：打造 CSS 模块与兼容处理

前言

在上一篇 Webpack 入门1 的文章中，我们了解了 Webpack 的基本概念和安装配置。在这一篇中，我们将继续深入探索 Webpack，重点介绍 CSS 模块和 CSS 兼容性处理。

CSS 模块

CSS 模块是一种 CSS 预处理器，可以将 CSS 类名限定在特定的组件或模块中，避免全局样式冲突。这使得 CSS 代码更加可维护和重用。

在 Webpack 中，我们可以使用 css-loader 和 style-loader 来支持 CSS 模块。首先，需要在项目中安装这两个包：

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

然后，在 Webpack 配置文件中添加以下配置：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}

这样，就可以在项目中使用 CSS 模块了。只需要在 CSS 文件中使用 module 来定义 CSS 类名，即可将类名限定在特定的组件或模块中。

例如，以下 CSS 代码定义了一个名为 my-component 的 CSS 模块：

.my-component {
  color: red;
  font-size: 16px;
}

当使用这个 CSS 模块时，类名 my-component 将仅在 my-component 组件中有效，不会影响其他组件的样式。

CSS 兼容性处理

CSS 兼容性处理是指将 CSS 代码转换成兼容旧版本浏览器的格式。这可以通过使用 CSS 预处理器或 PostCSS 来实现。

在 Webpack 中，我们可以使用 postcss-loader 和 autoprefixer 来处理 CSS 兼容性。首先，需要在项目中安装这两个包：

npm install --save-dev postcss-loader autoprefixer

然后，在 Webpack 配置文件中添加以下配置：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }
  ]
}

其中，postcss-loader 用于加载 PostCSS 配置文件，autoprefixer 用于自动添加浏览器前缀。

在项目的根目录下创建一个名为 postcss.config.js 的文件，并添加以下配置：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

这样，就可以在项目中处理 CSS 兼容性了。当使用 PostCSS 时，它会自动检测目标浏览器的版本，并添加必要的浏览器前缀。

提取 CSS 成单独文件

在开发过程中，我们通常将 CSS 代码直接内联到 HTML 文件中。但是，在生产环境中，为了提高性能，通常会将 CSS 代码提取成单独的文件。

在 Webpack 中，我们可以使用 mini-css-extract-plugin 来提取 CSS 成单独的文件。首先，需要在项目中安装这个包：

npm install --save-dev mini-css-extract-plugin

然后，在 Webpack 配置文件中添加以下配置：

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

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader'
      ]
    }
  ]
}

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css',
  })
]

其中，MiniCssExtractPlugin.loader 用于提取 CSS 成单独的文件，filename 选项指定输出文件的名称。

这样，就可以在项目中将 CSS 代码提取成单独的文件了。

配置输出路径和文件名

在 Webpack 中，我们可以通过 output 选项来配置输出文件的路径和文件名。在 webpack.config.js 文件中，添加以下配置：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js',
}

其中，path 选项指定输出文件的路径，filename 选项指定输出文件的名称。

这样，就可以在项目中配置输出文件的路径和文件名了。

结语

以上就是本篇 Webpack 入门2 的全部内容。我们学习了如何使用 CSS 模块、处理 CSS 兼容性、提取 CSS 成单独文件，以及配置输出路径和文件名。希望这些知识能够帮助您在 Webpack 中构建更复杂的项目。