[英]How to fix Bootstrap error when I run webpack-dev-server?
When I run npm start
script command for webpack-dev-server in the console, the localhost:8080
opens in the browser but doesn'render my ./src/index.js file. 当我在控制台中为webpack-dev-server运行
npm start
script命令时, localhost:8080
在浏览器中打开,但不呈现我的./src/index.js文件。 Instead I get an error pointing to a bootstrap file. 相反,我得到一个指向引导文件的错误。
My project's tree 我的项目的树
My Project
/node_modules
/src
/components
Counter.js
index.html
index.css
index.js
package.json
package-lock.json
webpack.config.js
Package.json 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 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 ./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 .src / index.html
<div id="root"></div>
.src/components/Counter.js .src / components / Counter.js
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1>Hello World</h1>;
}
}
export default Counter;
This is how the error looks in the terminal 这是终端中错误的外观
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 project's files if you want to try them out GitHub项目的文件,如果您想尝试一下
https://github.com/cristiAndreiTarasi/FStackoverflow https://github.com/cristiAndreiTarasi/FStackoverflow
I want to get webpack
to work properly with bootstrap
and create the ./dist
folder in order to get the result in the browser. 我想让
webpack
与bootstrap
一起正常工作,并创建./dist
文件夹,以便在浏览器中获取结果。
in ./src/index.js
you import App
: 在
./src/index.js
您导入App
:
import App from './App';
But you 1) don't use App
and also there is no App.js(x)
in your project directory. 但是您1)不要使用
App
并且项目目录中也没有App.js(x)
。 Remove that line or comment it out (since you're not using it). 删除该行或将其注释掉(因为您不使用它)。
Then for the error: Module not found: Error: Can't resolve './components/Counter'
: 然后针对错误:
Module not found: Error: Can't resolve './components/Counter'
:
You say in your question that your project directory looks like: 您在问题中说您的项目目录如下:
My Project
/src
/component
Counter.js
But your GitHub shows that Counter.js
actually is Counter.jsx
. 但是您的GitHub上显示
Counter.js
实际上是Counter.jsx
。 If you want to import files without extensions ( './Counter'
instead of ./Counter.jsx
or ./Counter.js
), Webpack - without any tweaking - defaults to one of : ['.wasm', '.mjs', '.js', '.json']
. 如果要导入不带扩展名的文件(用
'./Counter'
而不是./Counter.jsx
或./Counter.js
),则Webpack-不作任何调整- 默认为以下之一 : ['.wasm', '.mjs', '.js', '.json']
。 You need to add the following to your webpack config if you want also want to import .jsx
without extension: 您需要将以下添加到您的WebPack的配置,如果你想也想导入
.jsx
不带扩展名:
module.exports = {
//...
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'] // add .jsx
}
};
For the error Error: Can't resolve './src/index.css'
: once again, your GitHub doesn't show an index.css
file in your src
directory. 对于错误
Error: Can't resolve './src/index.css'
:再次,您的GitHub不在src
目录中显示index.css
文件。
You also need css-loader set up to solve the following error: 您还需要设置css-loader来解决以下错误:
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:0 Module parse failed: Unexpected token (7:0)
./node_modules/bootstrap/dist/css/bootstrap.css中的错误7:0模块解析失败:意外的令牌(7:0)
The errors you receive are actually very descriptive. 您收到的错误实际上是非常描述性的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.