Javascript Web包无法启动react项目

我正在学习使用webpack开发react项目，但我无法在本地启动本地服务。它报告以下错误

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, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from './App';
|
> ReactDOM.render(<App />, document.getElementById('root'));
|

---

我找到了问题所在。在

package.json

的脚本中，我没有为

npm run start

命令指定

webpack.dev.js

文件，在做了以下更改后，它工作了

  "scripts": {
    "start": "webpack-dev-server --config webpack/webpack.dev.js",
  },

---

我想，由于您的文件以

.js

结尾，babel加载程序无法获取它。由于您正在创建React应用程序，除非您想深入了解webpack/babel的工作原理，否则只需使用create-React-app。您是否已配置babel以应用React预设？但我的配置是

test://\（jsx？| tsx？$/

，我认为它也可以在

.js

文件上工作。@ChrisGI已配置

{“预设”：[“env”，“react”]}

中的。babelrc文件@Jornsharpeyou似乎在混合巴别塔6和7，你能进一步简化这个例子吗？

// webpack.dev.js
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const path = require('path');

const devConfig =  merge(commonConfig, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000
  }
})
module.exports = devConfig;

// package.json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server",
},
"devDependencies": {
  "@babel/core": "^7.11.4",
  "@babel/preset-env": "^7.11.0",
  "@babel/preset-react": "^7.10.4",
  "babel-core": "^6.26.3",
  "babel-loader": "^8.1.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "html-webpack-plugin": "^4.3.0",
  "webpack": "^4.44.1",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
},
"dependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1"

// .babelrc
{
  "presets": ["env", "react"]
}

  "scripts": {
    "start": "webpack-dev-server --config webpack/webpack.dev.js",
  },