mini-css-extract-plugin - CSS

mini-css-extract-plugin是一个webpack插件，用于将CSS文件从Javascript代码中提取出来，并单独打包输出。这有助于减小打包后的文件体积，提升页面加载速度。

安装

使用npm安装：

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

使用

1. 在webpack配置文件中引入插件并配置：

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

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

2. 在Javascript代码中引入CSS文件：

import './style.css';

3. 运行webpack，生成单独的CSS文件。

配置选项

mini-css-extract-plugin可以接受以下配置选项：

• filename: String，CSS文件的输出路径和文件名，默认值为[name].css。
• chunkFilename: String，非入口文件的CSS文件的输出路径和文件名，默认值为[id].css。
• ignoreOrder: Boolean，是否忽略CSS文件中的顺序，默认值为false。
• linkType: String，CSS文件的引入方式，可选值为"style"和"false"，默认为"css"。是否使用style标签插入link属性的形式入库

示例

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

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

结论

mini-css-extract-plugin是一个非常有用的webpack插件，通过将CSS文件从Javascript代码中提取出来并单独打包输出，可以显著减小打包后的文件体积，提升页面加载速度。同时，它提供了多种配置选项，可以根据实际需求进行灵活配置。