Question

我有一个带有以下tsconfig.json的打字稿反应项目：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "declaration": false,
    "noUnusedLocals": false,
    "removeComments": true,
    "jsx": "react",
    "types": [
      "react"
    ],
    "noImplicitAny": true,
    "outDir": "./dist/",
    "preserveConstEnums": true,
    "sourceMap": true,
    "typeRoots": [
      "./types",
      "node_modules/@types"
    ],
    "strictNullChecks": true,
    "baseUrl": "./",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

当我进行开发时： "webpack-dev-server --host 0.0.0.0 --port 3000 --hot --progress --colors --history-api-fallback --config webpack.dev.config.js"

它工作正常，但是如果我使用以下webpack.prod.config.js文件进行产品构建：

const webpack = require('webpack');
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')),
});

module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.tsx',
    vendor: ['react', 'react-dom', 'react-router-dom', 'redux', 'react-redux', 'redux-thunk'],
  },

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
  },
  target: 'web',
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'awesome-typescript-loader',
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader',
      },
      {
        test: /.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.css$/,
        include: /app|node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /.(jpg|png|gif|eot|woff|ttf|svg)/,
        loader: 'file-loader',
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin('[name].css'),
    devFlagPlugin,
    new webpack.ProvidePlugin({
      React: 'react',
    }),
  ],
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          ecma: 6,
        },
      }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
};

它也已成功构建，但是当我处理内容然后转到localhost：80时，页面无法打开，控制台日志中出现以下错误：

TypeError: Object(...) is not a function
    M index.es.js:382
    React 11
    <anonymous> index.tsx:36
    Webpack 3

这个问题无法在dev版本中重现，因此ts代码似乎还可以，但是prod版本没有按预期执行。在Webpack构建设置中我错过了什么？

webpack +打字稿生成aritifcate不起作用

0 个答案: