chore: replace style-loader with MiniCssExtractPlugin

azx1573 · Oct 5, 2024 · 541f56e · 541f56e
1 parent 97b6fc5
commit 541f56e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
@@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const EslintWebpackPlugin = require("eslint-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 // @ts-check
 /** @type {import('webpack').Configuration} */
@@ -22,19 +23,19 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.less$/,
-        use: ["style-loader", "css-loader", "less-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
       },
       {
         test: /\.s[ac]ss$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
       },
       {
         test: /\.styl$/,
-        use: ["style-loader", "css-loader", "stylus-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
       },
       {
         test: /\.(png|jpe?g|gif|webp|svg)$/,
@@ -66,13 +67,14 @@ module.exports = {
       template: path.resolve(__dirname, "../index.html"),
     }),
     // 打包分析插件
-    new BundleAnalyzerPlugin({
-      openAnalyzer: false,
-    }),
+    // new BundleAnalyzerPlugin({
+    //   openAnalyzer: false,
+    // }),
     // 配置eslint插件
     new EslintWebpackPlugin({
       context: path.resolve(__dirname, "src"),
     }),
+    new MiniCssExtractPlugin(),
   ],
   resolve: {
     extensions: [".ts", ".js"],

diff --git a/config/webpack.prod.js b/config/webpack.prod.js
@@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const EslintWebpackPlugin = require("eslint-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 // @ts-check
 /** @type {import('webpack').Configuration} */
@@ -28,19 +29,19 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.less$/,
-        use: ["style-loader", "css-loader", "less-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
       },
       {
         test: /\.s[ac]ss$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
       },
       {
         test: /\.styl$/,
-        use: ["style-loader", "css-loader", "stylus-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
       },
       // 使用webpack内置的资源模块类型处理图片文件(asset为通用资源模块，会自动根据文件大小选择base64或者file)
       {
@@ -74,13 +75,14 @@ module.exports = {
       template: path.resolve(__dirname, "../index.html"),
     }),
     // 打包分析插件
-    new BundleAnalyzerPlugin({
-      openAnalyzer: false,
-    }),
+    // new BundleAnalyzerPlugin({
+    //   openAnalyzer: false,
+    // }),
     // 配置eslint插件
     new EslintWebpackPlugin({
       context: path.resolve(__dirname, "src"),
     }),
+    new MiniCssExtractPlugin(),
   ],
   resolve: {
     extensions: [".ts", ".js"],

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "fs-extra": "^11.2.0",
     "husky": "^9.1.6",
     "less-loader": "^12.2.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "sass": "^1.79.4",
     "sass-loader": "^16.0.2",
     "style-loader": "^4.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml