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文档中使用example（单击webpack）。这样可以使您的webpack配置保持简单，并通过在要设置不同设置的目录中放置.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吗？

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

1 个答案: