Question

对于要创建用于学习它的React应用程序，我具有以下目录结构。我已经成功使用sudo npm start在本地成功运行了该应用程序，但是现在我需要查看文件压缩和生产就绪状态。尽管我无法使其正常运行，但我正在尝试合并webpack。我已经在下面包含了我的package.json文件。

尽管我收到以下错误，但仍尝试阅读npm run build上的大量文章，观看视频和提问。

有人可以告诉我我在做什么错吗？

谢谢

加载npm run build时收到错误

> webpack --mode production

Hash: 5f183040822e4fd0a9b9
Version: webpack 4.31.0
Time: 284ms
Built at: 
 1 asset
Entrypoint main = main.js
[0] ./src/index.js 284 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js 7:16
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| import registerServiceWorker from './registerServiceWorker';
| 
> ReactDOM.render(<App />, document.getElementById('root'));
| registerServiceWorker();
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! client@0.1.0 build: `webpack --mode production`

查看错误消息，我已经删除了registerServiceWork引用，但是在运行npm run build之后，我看到以下错误消息。

第二次尝试

Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
| import App from './App';
| 
> ReactDOM.render(<App />, document.getElementById('root'));
|

目录结构

-src
---index.js
---app.js
-build.sh
-package.json

package.json

    {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.3.1",
    "cors": "^2.8.5",
    "google-map-react": "^1.1.4",
    "ip": "^1.1.5",
    "joi": "^14.3.1",
    "moment": "^2.24.0",
    "public-ip": "^3.0.0",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^16.8.6",
    "react-moment": "^0.8.4",
    "react-navigation": "^3.3.0",
    "react-number-format": "^4.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "reactstrap": "^6.3.0",
    "recharts": "^1.5.0",
    "request-ip": "^2.1.3",
    "universal-cookie": "^4.0.0",
    "uuid": "^3.3.2",
    "validator": "^10.11.0"
  },
  "scripts": {
    "start": "PORT=80 react-scripts start",
    "build": "webpack --mode production",
    "test": "bundlesize",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "bundlesize": "^0.17.1",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.7.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.2",
    "webpack-dashboard": "^3.0.7",
    "webpack-dev-server": "^3.3.1"
  }
}

为完整性起见，下面包括了index.js。

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import App from './App';

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

无法将Webpack与我的React应用集成

0 个答案: