the js file is segmented, but the css in it will still exist

css will be packaged if the js file is not split

"use strict"

const autoprefixer = require("autoprefixer");
const path = require("path")
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
const eslintFormatter = require("react-dev-utils/eslintFormatter");
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const CompressionPlugin = require("compression-webpack-plugin");
const paths = require("./paths");
const getClientEnvironment = require("./env");

const publicPath = paths.servedPath;
const shouldUseRelativeAssetPaths = publicPath === "./";
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
const publicUrl = publicPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);

if (env.stringified["process.env"].NODE_ENV !== ""production"") {
  throw new Error("Production builds must have NODE_ENV=production.");
}

const cssFilename = "static/css/[name].[contenthash:8].css";

const extractTextPluginOptions = shouldUseRelativeAssetPaths
  ? // Making sure that the publicPath goes back to to build folder.
  { publicPath: Array(cssFilename.split("/").length).join("../") }
  : {};

module.exports = {
  bail: true,
  devtool: false, //shouldUseSourceMap ? "source-map" : false,
  //
  entry: {
    main: [
      require.resolve("./polyfills"),
      paths.appIndexJs
    ],
    "vendor1": ["react", "react-dom", "react-router", "react-redux", "redux"], //reactjs
    "vendor2": ["crypto-js"],
    "vendor3": ["axios"],
  },
  output: {
    path: paths.appBuild,
    filename: "static/js/[name].[chunkhash:8].js",
    chunkFilename: "static/js/[name].[chunkhash:8].chunk.js",
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path
        .relative(paths.appSrc, info.absoluteResourcePath)
        .replace(/\\/g, "/"),
  },
  resolve: {
    modules: ["node_modules", paths.appNodeModules].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: [".web.js", ".js", ".json", ".web.jsx", ".jsx"],
    alias: {
      "react-native": "react-native-web",
      components: path.resolve(__dirname, "..") + "/src/common/components",
      container: path.resolve(__dirname, "..") + "/src/common/container",
      images: path.resolve(__dirname, "..") + "/src/common/images",
      pages: path.resolve(__dirname, "..") + "/src/common/pages",
      utils: path.resolve(__dirname, "..") + "/src/common/utils",
      data: path.resolve(__dirname, "..") + "/src/server/data",
      actions: path.resolve(__dirname, "..") + "/src/common/actions",
      reducers: path.resolve(__dirname, "..") + "/src/common/reducers",
      api: path.resolve(__dirname, "..") + "/src/common/api"
    },
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],
  },
  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /\.(js|jsx)$/,
        enforce: "pre",
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve("eslint"),

            },
            loader: require.resolve("eslint-loader"),
          },
        ],
        include: paths.appSrc,
      },
      {
        oneOf: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve("url-loader"),
            options: {
              limit: 10000,
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
          {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve("babel-loader"),
            options: {
              plugins: [
                "transform-decorators-legacy",
                ["import", [{ libraryName: "antd", style: true }]],  // import less
              ],
              compact: true,
            },
          },
          {
            test: /\.(css|less)$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: require.resolve("style-loader"),
                  use: [
                    {
                      loader: require.resolve("css-loader"),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        // sourceMap: shouldUseSourceMap,
                      },
                    },
                    {
                      loader: require.resolve("postcss-loader"),
                      options: {
                        ident: "postcss",
                        plugins: () => [
                          require("postcss-flexbugs-fixes"),
                          autoprefixer({
                            browsers: [
                              ">1%",
                              "last 4 versions",
                              "Firefox ESR",
                              "not ie < 9", // React doesn"t support IE8 anyway
                            ],
                            flexbox: "no-2009",
                          }),
                        ],
                      },
                    },
                    {
                      loader: require.resolve("less-loader"),
                      options: {
                        modifyVars: {
                          "@primary-color": "-sharp1890ff",
                          "@font-size-base": "14px",
                          "@badge-font-size": "12px",
                          "@btn-font-size-lg": "@font-size-base",
                          "@menu-dark-bg": "-sharp00182E",
                          "@menu-dark-submenu-bg": "-sharp000B14",
                          "@layout-sider-background": "-sharp00182E",
                          "@layout-body-background": "-sharpf0f2f5"
                        },
                      },
                    },
                  ],
                },
                extractTextPluginOptions
              )
            ),
          },
          {
            loader: require.resolve("file-loader"),
            exclude: [/\.js$/, /\.html$/, /\.json$/, /\.(css|less)$/,],
            options: {
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new InterpolateHtmlPlugin(env.raw),
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new webpack.DefinePlugin(env.stringified),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      compress: {
        warnings: false,
        comparisons: false,
        //  `console` 
        // ie
        drop_console: true,
        // 
        collapse_vars: true,
        // 
        reduce_vars: true,
      },
      output: {
        comments: false,
        ascii_only: true,
      },
      sourceMap: shouldUseSourceMap,
    }),
    new ExtractTextPlugin({
      filename: cssFilename,
    }),
    new ManifestPlugin({
      fileName: "asset-manifest.json",
    }),
    new SWPrecacheWebpackPlugin({
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: "service-worker.js",
      logger(message) {
        if (message.indexOf("Total precache size is") === 0) {
          return;
        }
        if (message.indexOf("Skipping static resource") === 0) {
          return;
        }
        console.log(message);
      },
      minify: true,
      navigateFallback: publicUrl + "/index.html",
      navigateFallbackWhitelist: [/^(?!\/__).*/],
      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new BundleAnalyzerPlugin(),
    // 
    new webpack.optimize.CommonsChunkPlugin({
      names: ["vendor3", "vendor2", "vendor1"],
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: ({ resource }) => (
        resource &&
        resource.indexOf("node_modules") >= 0 &&
        resource.match(/\.js$/)
      ),
    }),
    new webpack.optimize.CommonsChunkPlugin({
      async: "common-in-lazy",
      children: true,
      minChunks: ({ resource } = {}) => (
        resource &&
        resource.includes("node_modules") &&
        /axios/.test(resource)
      )
    }),
    new webpack.optimize.CommonsChunkPlugin({
      async: "used-twice",
      minChunks: (module, count) => (
        count >= 2
      ),
    }),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.optimize.DedupePlugin(),//
    new webpack.optimize.AggressiveMergingPlugin(),//
  ],
  node: {
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
  },
};