Webpack + TypeScript build aritifcate не работает - PullRequest
Новая
       4

Webpack + TypeScript build aritifcate не работает

0 голосов
/ 08 июля 2020

У меня есть проект реакции машинописного текста со следующим 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({}),
    ],
  },
};

Он также успешно построен, но когда я передаю содержимое, а затем go на 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?

...