将 target: 'es5' 添加到 webpack.config.js 文件时出现奇怪的错误

Question

我一直在尝试学习全栈Web开发并开始学习webpack和babel。我开始得很慢，我什至还没有添加任何非开发依赖项，如反应或电子。我只是想了解 babel 和 webpack 结合使用时如何运行的基础知识。我已经获得了我的 webpack 文件，并且在添加

target: "es5",

行之前它工作得很好。现在看起来像：

module.exports = {
  entry: './src/index.js',
  target: "es5",
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'babel-loader'
      }
    }]
  }
}

将文件转换为 es5 时效果非常好，但 webpack 语法使用了较新的版本。当尝试让 webpack 将其自己的语法转换为 es5 时 - 通过

target: "es5",

行 - 通过运行命令

npx webpack --config webpack.config.js --mode=development

它给了我以下错误。

Error: For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Select an appropriate 'target' to allow selecting one by default, or specify the 'output.chunkFormat' directly.

为什么我会收到此错误以及如何修复？

我还应该注意，我确实有一个名为 babel.config.js 的单独文件，其中包含以下内容。

module.exports = {
  presets: ["@babel/preset-env"]
}

Answer 1

尝试定义你的 chunkFormat。

在这里找到答案https://github.com/Jaid/epoch-seconds/issues/77.

这是一个例子：

  output: {
    chunkFormat: "commonjs", 
    library: {
      type: "module",
    },
    clean: true
  }, 
    module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },

我在尝试转换为 es5 时遇到了类似的问题，但在我的源代码中使用

import()

，我必须将我的定义为模块。

这对我的情况很有效。

  output: {
    chunkFormat: "module", 
    library: {
      type: "module",
    },
    clean: true
  },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },

如果您有兴趣，请阅读以下内容：https://webpack.js.org/configuration/output/#outputchunkformat

祝你好运。