webpack --watch не хочет обрабатывать реагирующий компонент внутри моего index.js - PullRequest
Новая
       39

webpack --watch не хочет обрабатывать реагирующий компонент внутри моего index.js

0 голосов
/ 23 февраля 2019

Я старый кодер, но я новичок, чтобы реагировать, и, похоже, мне нужна еще пара глазных яблок.Я пытаюсь настроить очень простое приложение React с нуля (для практики), и оно срабатывает нормально, но когда я пытаюсь запустить webpack --watch, оно выдает мне следующую ошибку:

Вот ошибка, которую яЯ получаю: 

    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.
| import App from "./components/App.js";
| 
> ReactDOM.render(<App />, document.getElementById('root'));
|

Вот мой файл webpack.dev.config: 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "index_bundle.js"
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                },
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
};

Вот мой файл package.json: 

{
    "name": "react-boilerplate",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch --open",
        "dev": "./node_modules/.bin/webpack-dev-server --mode development --config ./webpack.dev.config.js",
        "build": "webpack --mode production"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.3.3",
        "@babel/preset-env": "^7.3.1",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.5",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^2.1.0",
        "html-webpack-plugin": "^3.2.0",
        "style-loader": "^0.23.1",
        "webpack": "^4.29.5",
        "webpack-cli": "^3.2.3",
        "webpack-dev-server": "^3.2.0"
    },
    "dependencies": {
        "react": "^16.8.3",
        "react-dom": "^16.8.3"
    }
}

Вот мой.Файл babelrc: 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

И наконец ... мой файл index.js 

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";

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

Структура каталогов

Это должно быть довольнопрямо, но я думаю, что я просто не вижу что-то.Буду признателен за любую помощь !!

...