webpack无法启动反应项目

编程问答 2022-08-13

问题描述

我正在学习使用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'));
|

我怀疑这是babel编译问题，但是我已经配置了babel-loader，但是它不起作用。我在这个问题上搜索了很长时间，但仍然没有找到问题。你能帮助我吗？谢谢！

这是我的配置文件。

// webpack.common.js
const path = require('path');
const commonConfig = {
  entry: [
    'babel-polyfill','../src/index.js'
  ],output: {
    path: path.resolve(__dirname,'dist'),filename: 'bundle.js'
  },plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'dist/index.html')
    })
  ],module: {
    rules: [{
      test: /\.(jsx?|tsx?)$/,loader: 'babel-loader',exclude: /node_modules/,}]
  }
};
module.exports = commonConfig;

// 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,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"]
}

解决方法

我发现问题出在哪里。我没有在webpack.dev.js的脚本中为npm run start命令指定package.json文件，并且在进行了以下更改后它可以工作。

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