1. use webpack 4.6.0 + React + React-router (with react-loadable) to load on demand, compress CSS when packaging and compiling in production environment, and sometimes multiple packages can be completed, but the packaged CSS is not compressed, and some CSS files seem to be packaged with js code, and some styles run through the server do not seem to work?
2. key webpack configuration

const extractCSS = new extractTextPlugin({
            filename: "css/[name].[md5:contenthash:hex:8].css",
            allChunks: true
        });
const extractSCSS = new extractTextPlugin({
            filename: "css/[name].[md5:contenthash:hex:8].css",
            allChunks: true
        });

plugins: [
        // CSS
        extractCSS,
        extractSCSS,

        // css
        new optimizeCssPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require("cssnano"),
            cssProcessorOptions: { discardComments: { removeAll: true } },
            canPrint: true
        }),
    ],

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: [
                    "babel-loader",
                ],
                exclude: path.resolve(__dirname," ../../node_modules"),
            },
            {
                test: /\.scss$/,
                use: extractSCSS.extract({
                use: [
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                    
                ],
                fallback: "style-loader",
                }),
                include: path.resolve(__dirname," ../../client")
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    use: ["css-loader","postcss-loader"],
                    fallback: "style-loader",
                }),
                include:[
                    path.resolve(__dirname," ../../client"),
                    path.join(__dirname, "../../node_modules/antd")
                ]
            },
            {
                test: /\.(png|jpg|jpeg|png|gif|woff|svg|eot|ttf)/,
                loader: "url-loader?limit=8192&name=[name].[hash:8].[ext]&publicPath=" + webpackFiles.resourcePrefix + "&outputPath="+webpackFiles.resource+"/"
            },
            {
                test: /\.swf$/,
                loader: "file?name=js/[name].[ext]"
            },
        ]
    }

});

• post.config.js

module.exports = {
  plugins: [
    require("autoprefixer"),
  ]
};

• .babelrc

{
    "presets": [

        ["es2015",{"loose":true,"modules": false}],

        "react",
     ],

    "env": {
        "development": {
            "presets": ["stage-2","react-hmre"]
        },
        "production": {
            "presets": ["stage-2"],
        }
    },
    
    "plugins": [
        ["import", {"libraryName": "antd", "libraryDirectory": "es", "style": "css"}],
        
    ]
}

1. Route load on demand

/*------------------------*/
const Index = Loadable({
  loader: () => import("../views/index"),
  loading: loadingComponent
});

const Detail= Loadable({
  loader: () => import("../views/detail"),
  loading: loadingComponent
});

const Login= Loadable({
  loader: () => import("../views/login"),
  loading: loadingComponent
});
const Product= Loadable({
  loader: () => import("../views/product"),
  loading: loadingComponent
});
const Regist= Loadable({
  loader: () => import("../views/regist/regist"),
  loading: loadingComponent
});
const Seller= Loadable({
  loader: () => import("../views/userInfo/user"),
  loading: loadingComponent
});
const UserSet= Loadable({
  loader: () => import("../views/userSet"),
  loading: loadingComponent
});

1. error screenshot

1. in addition, it is normal to use react-loadable to load js on demand. Can the naming be defined by myself? solve.