使用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相關的導入的處理。