时间戳

首页 > 解决方案 > webpack 无法启动 react 项目

javascript - webpack 无法启动 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'));
|

我怀疑这是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"]
}

标签： javascriptreactjswebpackwebpack-dev-server

解决方案

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

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

推荐阅读