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

Question

我从一个由 webpack 3 和类似的旧 babel 版本组成的配置开始。它可以在以下 repo 中找到：

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

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

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

无论我是否使用 .babelrc，结果都是一样的。

webpack 配置文件曾经位于项目的根目录，正如您在我上面链接的 repo 中看到的那样，现在它们位于嵌套的 "config" 文件夹中。

起初我认为这可能是这个问题的原因，所以我尝试了以下方法：

在入口点使用 path.resolve() 以使用绝对路径来确保它不会被 babel 从相对于 who knows 的字符串重新解释其中.
将 webpack 配置文件放回项目的根目录并从该路径构建。

在我尝试过的所有变体中 - webpack 总是完美地完成它的工作，而 babel 遍历错误的文件。我什至不确定这怎么可能，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 正在导出一个包含已处理代码（开发模式设置）的 evals 包。 babel 插件没有寻找 eval 语句，所以我唯一能看到的是 webpack 相关导入的处理。

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

BabelJS is processing the wrong files when working with Webpack 4

javascript

webpack

babeljs

webpack-4