使用 Webpack 4 时，BabelJS 正在处理错误的文件答案

【问题标题】：BabelJS is processing the wrong files when working with Webpack 4使用 Webpack 4 时，BabelJS 正在处理错误的文件
【发布时间】：2019-01-23 17:18:39
【问题描述】：

我从一个包含 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 不会从相对于谁知道在哪里的字符串中重新解释它。
将 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'
          }
        ]
      }
    ]
  }
}

【问题讨论】：

你实际看到了什么让你说 Babel 在错误的文件上运行？如果有人想查看您的存储库，他们会寻找什么？
我正在登录访问者：输入（）我提供给 babel-loader 的任何插件中的路径。在旧仓库中，我链接到的日志描述了源文件（应该如此），而在我的新配置中，日志描述了 webpack 配置文件。你想让我也用新配置创建一个 repo 吗？

标签： javascript webpack babeljs webpack-4

【解决方案1】：

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

【讨论】：