webpack利用mini-css-extract-plugin将css单独放在一个文件夹

mini-css-extract-plugin

如果你不懂wepback的五大核心概念，那么我推荐你先将五大核心与webpack的基本配置了解与loader的基本使用
webpack的基本概念与核心配置：https://blog.csdn.net/Xtianbaizhou/article/details/125268059
css-loader的基本配置：https://blog.csdn.net/Xtianbaizhou/article/details/125268606

作用：mini-css-extract-plugin在使用css-loader和style-loader是将css全部都放到了js里面，就会导致js代码很冗余，有着css的代码，所以可以通过这个插件将css单独抽出来，形成一个单独的文件

2.1 安装

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

2.2 配置

webpack.config.js

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

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,  // 找到配置css的地方
        use: [MiniCssExtractPlugin.loader, "css-loader"], // 将style-loader换成Min。。，因为这是提取css为文件，而style-loader会创建style标签
      },
    ],
  },
};

扩展:虽然完成了css样式的的提取，但并不是放在一个文件夹里面的，所以需要将他单独放到一个文件夹里使用 optimization.splitChunks.cacheGroups 选项

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");  // 用插件之前先引入

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          type: "css/mini-extract",
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};