webpack 啟動react項目失敗

Question

我正在學習使用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，但是還是不行。 這個問題我google了很久，還是沒找到問題所在。 你能幫助我嗎？ 謝謝！

這是我的配置文件。

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

Answer 1

我發現了問題所在。 我沒有在 package.json 的腳本中為package.json npm run start命令指定webpack.dev.js文件，並且在進行以下更改后它可以工作。

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