使用Webpack 4时BabelJS处理错误的文件

Question

我从同时包含webpack 3和类似的旧babel版本的配置开始。 可以在以下回购中找到它：

https://github.com/konradmi/react-loadable-ssr-code-splitting

我将webpack和babel以及所有节点模块都更新到了最新版本，并相应地迁移了旧配置。 这个问题可能源于任何这些。

迁移完成后，我注意到所有babel插件都遍历了我的webpack配置文件（位于单独的嵌套文件夹中），而不是遍历了webpack正确处理的实际js源文件。 （我通过在babel插件中进行一些记录来验证了它）。

无论是否使用.babelrc，结果都是相同的。

正如我在上面链接到的存储库中所见，webpack配置文件曾经位于项目的根目录，现在它们位于嵌套的“ config”文件夹中。

起初，我认为这可能是导致此问题的原因，因此我尝试了以下操作：

• 在入口点使用path.resolve（）以便使用绝对路径来确保babel不可能从相对于谁知道位置的字符串中重新解释它。

• 将webpack配置文件放回项目的根目录并从该路径构建。

在我尝试过的所有变体中，当babel遍历错误的文件时，webpack始终可以完美地完成其工作。 我什至不知道怎么可能，babel-loader应该遍历它从先前的webpack规则中获得的文件，该规则发出了正确的文件。

为了方便起见，以下是我当前的Webpack 4配置文件，它们被合并为1个文件，并删除了不相关的规则和插件：

const webpack = require('webpack')
const path = require('path')
const webpackNodeExternals = require('webpack-node-externals')

module.exports = {
  name: 'server',
  target: 'node',
  externals: [webpackNodeExternals()],
  entry: './src/server.tsx',
  output: {
    filename: 'bundle.js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, '../build')
  },
  mode: 'development',
  stats: 'verbose',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                babelrc: false,
                presets: [
                  [
                    '@babel/env',
                    {
                      'targets': {
                        'browsers': ['last 2 versions']
                      },
                      'debug': false
                    }
                  ],
                  '@babel/preset-react'
                ],
                plugins: [
                  '@babel/plugin-syntax-dynamic-import',
                  '@babel/plugin-proposal-class-properties',
                  '@babel/plugin-transform-object-assign',
                  'react-loadable/babel'
                ]
              }
            }
          ]
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

Answer 1

我是在服务器源代码中导入webpack，babel正在遍历的文件是我在源代码中添加的webpack导入。 除了那些导入外，它找不到其他任何东西，因为由于先前的规则，webpack导出的eval包中包含已处理的代码（开发模式设置）。 babel插件不是在寻找eval语句，所以我唯一能看到的是与webpack相关的导入的处理。