Question

我正在使用Webpack 4.29.0并做出16.7.0的响应，并且尝试从Udemy课程Web开发中从“开始”到“完成”呈现一个简单的网站消息，但是我收到了以下错误：未捕获的错误：目标容器：2019不是DOM元素，我无法确定问题，并且对webpack.config.js所做的每项更改似乎都不起作用。

我的理解：在src文件夹中>我创建了组件文件夹> 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"

    ]
  }
}

我的文件结构是

My File Structure

在我的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')
)

Google Chrome浏览器中的错误

Google Chrome Error React

Webpack中没有错误

Webpack information

Answer 1

您的webpack.config.js文件中有一个错字。将templates更改为template，一切顺利！

new HtmlWebpackPlugin({
  template: './src/index.html'
})

React在HTML文档中找不到根元素。这就是为什么会引发这样的错误。

使用webpack 4和React的目标容器不是DOM元素

1 个答案: