Pit*_*ton 2 javascript reactjs webpack
我正在使用 Webpack 4.29.0 并响应 16.7.0，我试图从 2019 年从头到尾呈现来自 Udemy 课程 Web 开发的简单网站消息，但是我收到错误：未捕获的错误：目标容器不是DOM 元素，我无法确定问题，我对 webpack.config.js 所做的每个更改似乎都不起作用。
我的理解：在 src 文件夹中 > 我创建了 components 文件夹 > header.js > import react 并导出了将由 > index.js > 使用 ReactDom.render 渲染它然后使用 index.html 显示的头组件> #root。我不明白为什么我的页面信息无法加载。
Package.json 信息：
{
"name": "ch-hawk-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"buildDev": "webpack-dev-server --mode development",
"buildProd": "webpack-dev-server --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/konistleio/Ch-Hawk-project.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/konistleio/Ch-Hawk-project/issues"
},
"homepage": "https://github.com/konistleio/Ch-Hawk-project#readme",
"devDependencies": {
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"terser-webpack-plugin": "^1.2.1"
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/react"
]
}
}
我的文件结构是
在我的 webpack.config.js 中，我有以下配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCss = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
app: './src/index.js'
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
},
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6
}
}),
new OptimizeCss({
cssProcessorOptions: {
discardComments: true
}
})
],
},
devServer: {
hot: true,
compress: true,
contentBase: path.join(__dirname, 'dist'),
open: 'Chrome'
},
watch: true,
devtool: 'source-map',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: "style.css",
chunkFilename: "[name].css"
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
templates: './src/index.html'
})
],
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader"
},
"sass-loader"
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: [
'.js',
'.scss'
]
}
};
在 src 文件夹中，我有包含 header.js 的 components 文件夹
import React from 'react';
export default class Header extends React.Component {
render() {
return (
<h1>{this.props.title}</h1>
)
}
}
在 src 文件夹中我也有 index.html
<html>
<head>
<title>
Our APP
</title>
</head>
<body>
<div id="root">
</div>
<script src="/bundle.js"></script>
</body>
</html>
在 src 文件夹中，我还有 index.js
import './sass/bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/header';
ReactDOM.render (
<Header title= "Our custom message" />,
document.getElementById('root')
)
谷歌浏览器中的错误
Webpack 中没有错误
你的 webpack.config.js 文件中有一个错字。更改templates为template，您就可以开始了！
new HtmlWebpackPlugin({
template: './src/index.html'
})
React 无法在您的 HTML 文档中找到根元素。这就是为什么它会引发这样的错误。
| 归档时间： |
|
| 查看次数： |
2504 次 |
| 最近记录： |