在 webpack.common.js 中让 css 加载适应多种环境

作为一名资深的 webpack 用户，您可能已经熟悉了 webpack.common.js 文件在构建过程中的重要性。它作为项目中共享的 webpack 配置文件，负责定义许多通用的构建设置，例如加载器、插件和解析器等。然而，在实际的开发过程中，我们常常需要根据不同的环境（如开发环境、测试环境和生产环境）加载不同的 CSS 代码。

考虑以下场景：在开发环境中，您可能希望加载未压缩的 CSS 代码，以便于调试和快速迭代。而在生产环境中，您可能需要加载经过压缩和优化的 CSS 代码，以提高性能和减少加载时间。如何在 webpack.common.js 文件中实现这种区分呢？让我们一探究竟。

1. 使用环境变量区分环境

webpack 提供了方便的环境变量支持，您可以利用这些变量来区分不同的环境。例如，您可以使用以下环境变量：

• NODE_ENV：表示当前的构建环境，通常有 "development"、"production" 和 "test" 等值。
• BUILD_ENV：您可以自定义的环境变量，用于区分不同的构建环境。

为了使用这些环境变量，您需要在 webpack.common.js 文件中使用 webpack 的 DefinePlugin 插件。该插件允许您在构建过程中定义环境变量。以下是一个示例：

const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.BUILD_ENV': JSON.stringify(process.env.BUILD_ENV),
    }),
  ],
};

通过这种方式，您就可以在代码中使用这些环境变量来区分不同的环境。例如，以下代码根据 NODE_ENV 环境变量加载不同的 CSS 代码：

const cssLoaders = [
  {
    loader: 'style-loader',
  },
  {
    loader: 'css-loader',
    options: {
      sourceMap: process.env.NODE_ENV === 'development',
    },
  },
];

if (process.env.NODE_ENV === 'production') {
  cssLoaders.push({
    loader: 'postcss-loader',
    options: {
      plugins: [
        require('autoprefixer'),
        require('cssnano'),
      ],
    },
  });
}

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssLoaders,
      },
    ],
  },
};

在上面的代码中，如果 NODE_ENV 环境变量为 "development"，则会加载未压缩的 CSS 代码；如果 NODE_ENV 环境变量为 "production"，则会加载经过压缩和优化的 CSS 代码。

2. 使用多环境配置文件

另一种更灵活的方式是使用多环境配置文件。这种方法允许您为不同的环境创建单独的 webpack 配置文件。例如，您可以创建以下两个配置文件：

• webpack.dev.js：用于开发环境的配置文件
• webpack.prod.js：用于生产环境的配置文件

然后，您可以在命令行中使用不同的配置文件来构建项目。例如：

webpack --config webpack.dev.js

webpack --config webpack.prod.js

在每个配置文件中，您可以根据需要加载不同的 CSS 代码。例如，在 webpack.dev.js 中，您可以加载未压缩的 CSS 代码；在 webpack.prod.js 中，您可以加载经过压缩和优化的 CSS 代码。

3. 使用 CSS 预处理器

如果您使用 CSS 预处理器（如 Sass 或 Less），您还可以利用预处理器的特性来区分不同的环境。例如，您可以使用预处理器的条件指令来加载不同的 CSS 代码。以下是一个 Sass 的示例：

@if $env == 'development' {
  @import "stylesheets/uncompressed.scss";
}
@else if $env == 'production' {
  @import "stylesheets/compressed.scss";
}

在上面的代码中，如果 env 变量为 "development"，则会加载 uncompressed.scss 文件；如果 env 变量为 "production"，则会加载 compressed.scss 文件。

结语

区分环境对于 webpack 的构建过程非常重要，可以帮助您加载不同的 CSS 代码，从而适应不同的开发、测试和生产环境。您可以使用环境变量、多环境配置文件或 CSS 预处理器来实现这种区分。希望本文对您有所帮助，祝您在 webpack 的构建过程中取得成功！