Как исправить ошибку Bootstrap при запуске webpack-dev-server?

Question

Когда я запускаю команду npm start script для webpack-dev-server в консоли, localhost:8080 открывается в браузере, но не отображает мой файл ./src/index.js. Вместо этого я получаю сообщение об ошибке, указывающее на файл начальной загрузки.

Дерево моего проекта

My Project
    /node_modules
    /src
        /components
            Counter.js
        index.html
        index.css
        index.js
    package.json
    package-lock.json
    webpack.config.js

Package.json

{
"name": "react_project", 
"version": "1.0.0",
"description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "bootstrap": "^4.1.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            },
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

. / SRC / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/Counter';

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

.src / index.html

<div id="root"></div>

.src / компоненты / Counter.js

import React, { Component } from 'react';

class Counter extends Component {
    render() {
        return <h1>Hello World</h1>;
    }
}

export default Counter;

Так выглядит ошибка в терминале

ERROR in ./src/index.js
Module not found: Error: Can't resolve './App' in 'C:\Users\cristi\WORK\My Project\src'
 @ ./src/index.js 4:0-24
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src

ERROR in ./src/index.js
Module not found: Error: Can't resolve './components/Counter' in 'C:\Users\cristi\WORK\My Project\src'
 @ ./src/index.js 6:0-43 7:36-43
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src

ERROR in ./src/index.js
Module not found: Error: Can't resolve './src/index.css' in 'C:\Users\cristi\WORK\My Project\src'
 @ ./src/index.js 3:0-25
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|  */
> :root {
|   --blue: #007bff;
|   --indigo: #6610f2;
 @ ./src/index.js 5:0-42
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 359 bytes {0} [built]
i ?wdm?: Failed to compile.

Файлы проекта GitHub, если вы хотите попробовать их

https://github.com/cristiAndreiTarasi/FStackoverflow

Я хочу, чтобы webpack правильно работал с bootstrap, и создайте папку ./dist, чтобы получить результат в браузере.

Answer 1

в ./src/index.js вы импортируете App:

import App from './App';

Но вы 1) не используете App, а также нет App.js(x) в каталоге вашего проекта. Удалите эту строку или закомментируйте ее (поскольку вы ее не используете).

Тогда для ошибки: Module not found: Error: Can't resolve './components/Counter':

В своем вопросе вы говорите, что каталог вашего проекта выглядит так:

My Project
    /src
        /component
            Counter.js

Но ваш GitHub показывает, что Counter.js на самом деле Counter.jsx. Если вы хотите импортировать файлы без расширений ('./Counter' вместо ./Counter.jsx или ./Counter.js), Webpack - без каких-либо настроек - по умолчанию имеет значение : ['.wasm', '.mjs', '.js', '.json']. Вам необходимо добавить следующее в конфигурацию вашего веб-пакета, если вы хотите импортировать .jsx без расширения:

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'] // add .jsx
  }
};

Для ошибки Error: Can't resolve './src/index.css': еще раз, ваш GitHub не показывает файл index.css в вашем каталоге src.

Вам также необходимо css-loader , настроенный для устранения следующей ошибки:

ОШИБКА в модуле ./node_modules/bootstrap/dist/css/bootstrap.css 7: 0 Сбой синтаксического анализа: неожиданный токен (7: 0)

Полученные вами ошибки на самом деле очень наглядны.