Webpack 4 Babel和React在处理JSX文件时出错

Question

我一直收到此错误，我尝试使用该网站和github上的搜索尝试几种解决方案，但我无法弄清楚它出了什么问题。 这是我的package.json中的内容

"dependencies": {
  "react": "^16.4.2",
  "react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}

这是我的webpack配置

module.export = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'main.js'
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    rules: [
        {
            test: /\.jsx$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
 ]
}

我用这个创建了一个.babelrc

{
 "presets": ["env", "react", "es2015"]
 }

然后我跑

webpack-dev-server --mode development  --hot

但是如果失败了

ReactDOM.render(<App />, document.getElementById('app'));

这是我在控制台中得到的错误

ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)  
You may need an appropriate loader to handle this file type.
| import App from './components/App';
|
 > ReactDOM.render(<App />, document.getElementById('app'));
@ multi (webpack)-dev-server/client?http://localhost:8080 
(webpack)/hot/dev-server.js ./src main[2]

我在Google，stackoverflow和github上花了3个小时，但我不知道这有什么问题。 非常感谢您的帮助。 谢谢！

Answer 1

只是扔在那里，但你有

module.export 

虽然应该

module.exports

Answer 2

问题是您的配置仅处理带有.jsx的文件，但是您也具有.js文件，因此，请在webpack配置中更改正则表达式并重新编译您的应用

const path = require("path");
 module.export = {
   entry: './src/index.js',
   output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.js',
      publicPath: "/
  },
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
 ],
  module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }
    ]
},
  resolve: {
    modules : [
       path.resolve("./src"),
       path.resolve("./node_modules")
    ],
    extensions: ['*', '.js', '.jsx']
  }
}

用这些依赖项替换现有模块

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

.babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }], 
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}