Webpack摇树不适用于打字稿和Babel7

Question

当我使用javascript进行树状摇动时，将模式设置为生产时可以很好地工作，但是当我切换为使用打字稿和babel 7时，树状摇动就行不通了。

我还尝试在package.json中设置“ sideEffects”：false“

我设置的所有babellrc [“ @ babel / preset-env”，{“ modules”：false}]，

我的tsconfig

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "es6",
    "target": "esnext",
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "noEmit": true,
    "moduleResolution": "node",
    "rootDir": "src",
    "isolatedModules": true,
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

我的生产webpack配置。请注意，我将优化最小化设置为false，以便不缩小输出。我可以清楚地看出它并没有摇树

module.exports = merge(common, {
  mode: 'production',

  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(?:sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),

    new OptimizeCssAssetsPlugin(),

    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true,
      },
    }),
  ],
  optimization: {
    minimize: false
  }
});

常见的webpack配置

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry:["@babel/polyfill", "./src/index.ts"],

  output: {
    path: path.resolve(__dirname, "dist")
  },

  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },

  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        enforce: 'pre',
        test: /\.(ts|js)x?$/,
        use: {
          loader: 'tslint-loader',
          options: {
            emitErrors: true,
            failOnHint: true
          }
        },
        exclude: /node_modules/
      },
      {
        enforce: "pre", test: /\.js$/, loader: "source-map-loader"
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: 'file-loader'
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
              noquotes: true,
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // Inline files smaller than 10 kB
              limit: 10 * 1024,
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                enabled: false,
                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                // Try enabling it in your environment by switching the config to:
                // enabled: true,
                // progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 7,
              },
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
            },
          }
        ]
      }
    ]
  },

  plugins: [
      new CleanWebpackPlugin(['dist'], {
        root: path.join(__dirname)
      }),
  ]
}