为jsx文件做出反应js webpack捆绑错误

我目前正在做一个小应用程序 . 我正在使用Webpack捆绑我的文件,当我尝试在命令行中执行webpack时,我在下面收到此错误,但是,如果条目扩展名为“./public/app.js”,它可以正常工作 . 我不明白我做错了什么 . 我确实看过其他一些帖子,但与我的问题不同 . 如果有任何感谢,我将非常感谢您的帮助 .

./public/app.jsx中的错误模块构建失败:ReferenceError:[BABEL] /Users/jair/Desktop/development/react-test/public/app.jsx:未知选项:base.preset . 有关更多信息,请查看http://babeljs.io/docs/usage/options/以获取更多信息,请访问LogManager.error(/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/logger.js:41:11)在OptionManager.mergeOptions(/用户/ jair / Desktop / development / react-test / node_modules / babel-core / lib / transformation / file / options / option-manager.js:216:20)在OptionManager.init(/ Users / jair / Desktop / development /在File.initOptions(/ Users / jair / Desktop / development / react-test / node_modules / babel-)的react-test / node_modules / babel-core / lib / transformation / file / options / option-manager.js:338:12) core / lib / transformation / file / index.js:216:65)在新文件中(/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/file/index.js:137 :24)在Pipeline.transform(/Users/jair/Desktop/development/react-test/node_modules/babel-core/lib/transformation/pipeline.js:46:16)在transpile(/ Users / jair / Desktop / development) /react-test/node_modules/babel-loader/index.js:38:20)在Object.module.exports(/ Users / jair / Desktop / development / r) EACT测试/ node_modules /巴别装载机/ index.js:131:12)

module.exports = {
entry: './public/app.jsx',
output: {
  path: __dirname,
  filename: './public/bundle.js'
},
resolve: {
  exensions: ['', '.js', '.jsx']
},
module: {
  loaders: [
    {
       loader: 'babel-loader',
       query: {
         preset: ['react', 'es2015']
       },
       test: /\.jsx?$/,
       exclude: /(node_modules | bower_components)/
    }
  ]
}

};

回答(1)

2 years ago

正确的选项名称是 presets ,而不是 preset

query: {
  presets: ['react', 'es2015']
}

另外,我认为需要删除 exclude 正则表达式中的空格:

exclude: /(node_modules|bower_components)/

希望这可以帮助!