Question

我正在使用PWA构建React，每次更改任何js文件中的某项时，都会遇到错误。是吗？

未捕获到的SyntaxError：意外令牌<< / p>

或

无法加载资源：服务器的响应状态为404（未找到）

两者均在main.js文件中。它完全可以在npm start上运行。如果我执行npm run build并且修改了任何js文件中的任何内容，就会发生这种情况。但是，一旦刷新页面，问题就消失了，直到我再次修改并执行run build。我尝试了一些解决方案，例如在head中index.html之后添加这两行：

  <script type="text/jsx" src="./index.js"></script>
  <script type="text/babel" src="./index.js"></script>

似乎没有帮助。另外，我添加了webpack.config.js并将其放入其中：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'bundled.js'
  },
  module: {
    rules: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets:['es2015','react']
            }
          }
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

我相信它甚至都不会运行此脚本。这是我的package.json文件：

{
  ...
  "private": true,
  "dependencies": {
    "babel-loader": "^8.0.2",
    "babel-preset-react": "^6.24.1",
    "cra-append-sw": "^2.5.0",
    "css-loader": "^1.0.0",
    "jquery": "^3.3.1",
    "react": "^16.4.1",
    "workbox-background-sync": "^3.4.1",
     ...
  },
  "scripts": {
    "dev": "REACT_APP_DEV_API_URL='development' npm start",
    "prod": "REACT_APP_PROD_API_URL='production' npm start",
    "start": "react-scripts start",
    "build": "react-scripts build && cra-append-sw ./sw.js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
    "@ionic/app-scripts": "^3.2.0",
    "babel-core": "^6.26.3"
  }
}

这是我的项目结构。

每当我修改代码时，React build都会出错

0 个答案: