Webpack babel-loader 是否需要 babel.config.js？

Question

我有一个像下面这样的 webpack 设置

test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
  loader: 'babel-loader?cacheDirectory',
  options: {
    presets: [
      '@babel/preset-env',
      '@babel/react', // Error: Plugin/Preset files are not allowed to export objects, only functions.
    ],
    plugins: [
      [
        '@babel/plugin-proposal-decorators',
        {
          legacy: true,
        },
      ],
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true,
        },
      ],
    ],
  },
},

那么我还需要添加一个文件babel.config.js还是.babelrc再次将配置加倍？

如果我使用 vscode，我需要babel.config.js一些插件的这个文件吗？

Answer 1

不，那是多余的。我看到您正在使用babel-loader文档中的示例。我建议使用官方 babel 文档中的示例（单击 webpack）。这使您的 webpack 配置保持简单，并允许通过将 a.babelrc放在您喜欢不同设置的目录中来轻松覆盖文件夹中的 babel 。

.babelrc

{
    "presets": [
        "@babel/preset-env"            
        "@babel/preset-react",
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        {
            "loose: true
        }
    ]
}

你的 webpack 配置文件

module: {
    loaders: [
        {
            test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
        }
    ]
}

考虑到错误：请确保你已经至少安装@babel/preset-react和@babel/preset-env，@babel/core以及@babel/plugin-proposal-class-properties！您可能正在使用 babel 6 插件。你能分享你的package.json吗？