build: fix antd 在生产打包时 css 丢失问题

Author: sunss

babel.config.js

@@ -1,6 +1,3 @@
-const { argv } = require('yargs');
-const isDev = argv.mode === 'development';
-
 module.exports = {
   presets: [
     [
@@ -27,7 +24,7 @@ module.exports = {
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-syntax-dynamic-import',
     'react-hot-loader/babel',
-    isDev && [
+    [
       'import',
       {
         libraryName: 'antd',

config/webpack.base.js

@@ -1,6 +1,9 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const paths = require('./paths');
+const { argv } = require('yargs');
+const isDev = argv.mode === 'development';
 
 /** @type {import('webpack').Configuration} */
 module.exports = {
@@ -21,13 +24,13 @@ module.exports = {
       // .css
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader'],
       },
       // .less
       {
         test: /\.less$/,
         use: [
-          'style-loader',
+          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
           {
             loader: 'less-loader',

config/webpack.prod.js

@@ -17,14 +17,14 @@ const prodConfig = {
     chunkFilename: '[name].[chunkhash].chunk.js',
   },
 
-  module: {
-    rules: [
-      {
-        test: /\.(css|less)$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
-      },
-    ],
-  },
+  // module: {
+  //   rules: [
+  //     {
+  //       test: /\.(css|less)$/,
+  //       use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
+  //     },
+  //   ],
+  // },
 
   optimization: {
     minimize: true,