Javascript 如何在运行webpack dev server时修复引导错误？

当我在控制台中为webpack dev server运行

npm start

script命令时，

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'
        })
    ]
}

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')
);

import React, { Component } from 'react';

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

export default Counter;

/src/index.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'
        })
    ]
}

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')
);

import React, { Component } from 'react';

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

export default Counter;

GitHub项目的文件，如果您想试用它们

---

我想获得

webpack

以正确使用

bootstrap

，并创建

/dist

文件夹，以便在浏览器中获得结果。

在

/src/index.js

中导入

应用程序

：

从“/App”导入应用程序；

但是你1）不使用

App

，而且你的项目目录中也没有

App.js（x）

。删除该行或将其注释掉（因为您没有使用它）

然后针对错误：

找不到模块：错误：无法解析。/components/Counter'

：

您在问题中说您的项目目录如下所示：

My Project
    /src
        /component
            Counter.js

但是您的GitHub显示，

Counter.js

实际上是。如果要导入不带扩展名的文件（

'./Counter'

，而不是

/Counter.jsx

或

/Counter.js

），则无需任何调整的Webpack-：

['.wasm'，'.mjs'，'.js'，'.json']

。如果还希望导入不带扩展名的

.jsx

，则需要将以下内容添加到网页配置中：

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

对于错误

错误：无法解析。/src/index.css'

：您的GitHub再次没有在

src

目录中显示

index.css

文件

您还需要设置以解决以下错误：

./node_modules/bootstrap/dist/css/bootstrap.css 7:0模块中出错 分析失败：意外令牌（7:0）

您收到的错误实际上非常具有描述性