webpack打包 CSS分离 mini-css-extract-plugin-CSDN博客

本文链接：https://blog.csdn.net/wuyujin1997/article/details/112549774

Intro

优化目的：应用首屏加载时间太久，按不同策略/角度分离打包文件。

步骤

安装依赖
npm install -D mini-css-extract-plugin
配置webpack配置文件

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

module.exports = {
  // ...
  
  plugins: [
    new HtmlWebpackPlugin({ template: "public/index.html" }),
    new MiniCssExtractPlugin({
      filename: "[hash:3].[name].css?v=[hash]",
      chunkFilename: "[hash:3].[id].css?v=[hash]",
      ignoreOrder: false,
      linkType: "text/css",
    }),
    // ...
  ],

  module: {
    rule: [
      // 处理CSS|less资源
      {
        test: /\.(css|less)$/,
        use: [
          // mini-css-extract-plugin 和 style-loader 是一样的功能(将JS字符串嵌入<style>标签内)，不可以同时使用。
          MiniCssExtractPlugin.loader,
          // { loader: "style-loader" }, // 利用JS字符串创建样式节点 即<style>标签
          { loader: "css-loader" },   // CSS -> CommonJS模块
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,  // 解决报错： Inline JavaScript is not enabled. Is it set in your options?
              },
            },
          },  // 编译： less -> CSS
        ],
      },
    ],
  },
  
};