Реактивная сборка выдает ошибку каждый раз, когда я изменяю код - PullRequest
Новая
       10

Реактивная сборка выдает ошибку каждый раз, когда я изменяю код

0 голосов
/ 10 сентября 2018

Я строю PWA с React и каждый раз, когда я меняю что-либо в любом js файле, я получаю сообщение об ошибке. Это либо:

Uncaught 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"
  }
}

А это моя структура проекта.

enter image description here

...