Question

当我在控制台中为webpack-dev-server运行import 'webrtc-adapter';脚本命令时，npm start在浏览器中打开，但未呈现我的./src/index.js文件。相反，我得到一个指向引导文件的错误。

我的项目的树

localhost:8080

Package.json

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

webpack.config.js

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

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

.src / 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')
);

.src / components / Counter.js

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

这是终端中的错误外观

import React, { Component } from 'react';

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

export default Counter;

如果要试用GitHub项目的文件

https://github.com/cristiAndreiTarasi/FStackoverflow

我想让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.与webpack一起正常工作，并创建bootstrap文件夹，以便在浏览器中获得结果。

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-不做任何调整-defaults to one of：['.wasm', '.mjs', '.js', '.json']。如果您还想导入不带扩展名的.jsx，则需要在webpack配置中添加以下内容：

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）

您收到的错误实际上是描述性的。

运行webpack-dev-server时如何解决Bootstrap错误？

1 个答案: