fix

Author: GongJS

.DS_Store

@@ -52,6 +52,7 @@
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.7.1",
     "jest-junit": "^6.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.11.0",
     "prism-react-renderer": "^0.1.6",
     "prop-types": "^15.7.2",
@@ -70,12 +71,14 @@
   "dependencies": {
     "@types/react-onclickoutside": "^6.7.3",
     "@types/react-transition-group": "^4.2.2",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "punycode": "^2.1.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-markdown": "^4.1.0",
     "react-router-dom": "^5.0.0",
-    "react-transition-group": "^4.2.2"
+    "react-transition-group": "^4.2.2",
+    "terser-webpack-plugin": "^2.3.5"
   },
   "config": {
     "commitizen": {

lib/.DS_Store

@@ -2,6 +2,8 @@ const path = require('path');
 const {
   CheckerPlugin
 } = require('awesome-typescript-loader')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const devMode = process.env.NODE_ENV !== 'production'
 
 function resolve(dir) {
   return path.join(__dirname, '', dir)
@@ -28,17 +30,23 @@ module.exports = {
         use: ['awesome-typescript-loader']
       },
       {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader']
-      }, 
-      {
-        test: /\.s[ac]ss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: './',
+              hmr: devMode, // 仅dev环境启用HMR功能
+            },
+          },
+          'css-loader',
+          'sass-loader'
+        ],
       },
       {
         test: /\.svg$/,
         loader: 'svg-sprite-loader'
-      }, 
+      },
       {
         test: /\.(png|jpg|gif|jpeg)$/,
         use: {
@@ -49,6 +57,12 @@ module.exports = {
     ]
   },
   plugins: [
-    new CheckerPlugin()
+    new CheckerPlugin(),
+    new MiniCssExtractPlugin({
+      // 这里的配置和webpackOptions.output中的配置相似
+      // 即可以通过在名字前加路径，来决定打包后的文件存在的路径
+      filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
+      chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
+    })
   ]
 }

lib/components/.DS_Store

@@ -1,7 +1,22 @@
 const baseConfig = require('./webpack.config');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = Object.assign({}, baseConfig, {
   mode: 'production',
+  optimization: {
+    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: 'styles',
+          test: /\.css$/,
+          chunks: 'all',
+          enforce: true,
+        },
+      }
+    },
+  },
   externals: {
     react: {
       commonjs: 'react',