在Webpack生产模式下使用样式化组件的react问题

Question

我对Webpack生产模式有疑问。我在我的小项目上使用react和type-script和styled-components代码部分（部分）遵循ES6标准，并使用webpack作为捆绑程序。在开发模式下一切都很好，但是当我进入生产模式时，它已成功编译，但我在本地运行它已显示错误。

示例因以下错误而停留：

TypeError: Cannot read property 'div' of undefined
at Module.91 (index.tsx:92)
at a (bootstrap:84)

Uncaught TypeError: Cannot read property 'div' of undefined
at Module.91 (index.tsx:92)
at a (bootstrap:84)

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "outDir": "./build/",
    "strictNullChecks": true,
    "moduleResolution": "node",
    "allowJs": true,
    "noEmit": true,
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react",
    "baseUrl": "./src",
    "lib": ["dom", "es5", "es6", "es7", "es2017"],
    "module": "esnext",
    "removeComments": true,
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

webpack.common.ts

const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "awesome-typescript-loader",
            options: {
              configFileName: path.resolve(__dirname, "./tsconfig.json"),
            },
          },
        ],
      },
      {
        test: /\.(png|svg|jp?g|webp|gif)$/i,
        loader: ["file-loader", "webp-loader?{quality: 100}"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      name: "vendor",
      minChunks: Infinity,
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "./public", "index.html"),
      inject: true,
    }),
  ],
};

webpack.prod.ts

const path = require("path");
const common = require("./webpack.common.ts");
const { merge } = require("webpack-merge");
module.exports = merge(common, {
  mode: "production",
  entry: {
    vendor: ["styled-components"],
    main: path.join(__dirname, "./src", "index"),
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name].[contentHash].build.js",
    publicPath: "/",
  },
  devtool: "source-map",
  externals: {
    "styled-components": {
      commonJS: "styled-components",
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  }
});

successfully compiled message reference image

我陷入了这个问题。我该如何解决这个问题或任何解决问题的建议？

谢谢。