mini-css-extract-plugin 使用教程

mini-css-extract-plugin 使用教程

mini-css-extract-pluginLightweight CSS extraction plugin项目地址:https://gitcode.com/gh_mirrors/mi/mini-css-extract-plugin

项目介绍

mini-css-extract-plugin 是一个基于 webpack v5 的插件，用于将 CSS 从 JavaScript 包中分离出来，生成独立的 CSS 文件。它支持 CSS 和 SourceMaps 的按需加载，适用于生产环境的构建，可以提高 CSS 文件的加载性能。

项目快速启动

安装插件

首先，你需要安装 mini-css-extract-plugin 和 css-loader：

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

配置 webpack

在你的 webpack 配置文件中，添加 mini-css-extract-plugin 和 css-loader：

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

示例代码

假设你有一个简单的项目结构：

src/
  index.js
  style.css

src/index.js 内容如下：

import './style.css';

src/style.css 内容如下：

body {
  background: green;
}

运行 webpack 构建后，你会得到一个独立的 CSS 文件。

应用案例和最佳实践

生产环境优化

在生产环境中，你可以通过启用 CSS 压缩来进一步优化：

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

开发环境配置

在开发环境中，你可以使用 style-loader 来将 CSS 注入到 DOM 中，以加快开发响应速度：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};

典型生态项目

mini-css-extract-plugin 通常与以下项目一起使用：

• webpack: 核心构建工具。
• css-loader: 处理 CSS 文件。
• css-minimizer-webpack-plugin: 用于生产环境下的 CSS 压缩。
• html-webpack-plugin: 自动生成 HTML 文件并注入 CSS 和 JS 文件。

这些工具共同构成了一个强大的前端构建生态系统，帮助开发者高效地管理和优化前端资源。

mini-css-extract-pluginLightweight CSS extraction plugin项目地址:https://gitcode.com/gh_mirrors/mi/mini-css-extract-plugin