Webpack4 之 MiniCssExtractPlugin 配置详解

## 配置 MiniCssExtractPlugin

MiniCssExtractPlugin 是一个 Webpack 插件，用于将 CSS 代码从 JavaScript 代码中提取出来，并将其单独打包成一个或多个 CSS 文件。这可以提高打包后的代码的性能，因为 CSS 代码在浏览器中通常会并行加载，而 JavaScript 代码则需要串行加载。

要使用 MiniCssExtractPlugin，需要在 webpack.config.js 中进行如下配置：

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};

在上面的配置中，filename 属性指定了打包后的 CSS 文件名，chunkFilename 属性指定了打包后的 CSS chunk 文件名。这两个属性都支持使用占位符，如[name] 和[id]，以根据不同的模块或 chunk 生成不同的文件名。

区分开发、生产模式

在配置 Webpack 时，需要区分用于开发模式还是生产模式。比如我们只需要在生产模式时压缩 CSS；而在开发模式的时候，我们又希望生成 Sourcemap 便于调试，以及样式热更新。那么，怎么在 webpack.config.js 中判断开发、生产模式呢？

const isProduction = process.env.NODE_ENV === 'production';

在上面的代码中，isProduction 变量用于判断当前是生产模式还是开发模式。如果 NODE_ENV 环境变量的值为 production，则表示当前是生产模式；否则，则表示当前是开发模式。

不同模式下的 CSS 配置

在不同的模式下，可以对 CSS 进行不同的配置。比如，在生产模式时，我们可以对 CSS 进行压缩和混淆，以减小代码体积和提高安全性；而在开发模式时，我们可以生成 Sourcemap 便于调试，以及启用样式热更新。

const isProduction = process.env.NODE_ENV === 'production';

const cssLoader = {
  loader: 'css-loader',
  options: {
    sourceMap: isProduction ? false : true,
  },
};

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    sourceMap: isProduction ? false : true,
  },
};

const sassLoader = {
  loader: 'sass-loader',
  options: {
    sourceMap: isProduction ? false : true,
  },
};

在上面的代码中，我们对 css-loader、postcss-loader 和 sass-loader 这三个 CSS 预处理器进行了配置。在生产模式下，我们将 Sourcemap 禁用，以减小代码体积；而在开发模式下，我们将 Sourcemap 启用，以便调试和样式热更新。

示例代码和最佳实践

以下是一些 MiniCssExtractPlugin 的示例代码和最佳实践：

• 在生产模式下，可以对 CSS 进行压缩和混淆。这可以减小代码体积和提高安全性。
• 在开发模式下，可以生成 Sourcemap 便于调试，以及启用样式热更新。这可以提高开发效率。
• 使用占位符来生成不同的文件名。这可以使文件名更具可读性。
• 使用 CSS 预处理器，如 Sass 或 Less，可以提高 CSS 的可维护性。

总结

通过本文的学习，我们了解了如何配置 MiniCssExtractPlugin，以满足不同场景的需求。我们还探讨了如何在 webpack.config.js 中判断开发、生产模式，以便在不同模式下进行不同的 CSS 配置。最后，我们提供了一些示例代码和最佳实践，帮助你更好地使用 MiniCssExtractPlugin。