Webpack 不在本地主机上呈现任何内容。它在 html 中附加了脚本标签，但主页上没有显示任何内容

Question

我是 webpack 的新手，我制作了一个反应应用程序，其中 index.js 作为入口文件，app.js 作为正在渲染的根组件。 webpack 构建正常，没有错误，脚本标签也被添加到 html 文件，但没有为 App 组件呈现内容。这些文件的代码是 - index.js-

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './components/App';
// import { initWeb3 } from './utils/web3';

const app = document.getElementById('app');
ReactDOM.render(
   <App />,
 app
);

App.js -

import React from 'react';

export class App extends React.Component{
    render(){
        return(
            <div>
                <h1> Hi there</h1>
            </div>
        )
      }
   }

webpack.config.js 文件是 -

        const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ESLintPlugin = require('eslint-webpack-plugin');
    const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
    const nodeExternals = require('webpack-node-externals');
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');

    var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
      template:__dirname+'/src/index.html',
      filename:'index.html',
      inject:'body'
    })

    const EslintOptions = {
      extensions: [`js`, `jsx`],
      exclude: [
        `/node_modules/`,
      ], // these are the options we'd previously passed in
    }

    module.exports = {
      resolve: {
        fallback: {
          fs: false,
          os:false,
          tls: false,
          net: false,
          path: require.resolve("path-browserify"),
          zlib: false,
          http: false,
          https: false,
          stream: false,
          crypto: false,
        } 
      },
      entry: {
        app: __dirname+'/src/index.jsx'
      },
      externalsPresets:{node:true},
      externals:[nodeExternals()],
      output: {
        filename: '[name].bundle.js',
        path: __dirname+'/public'
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env', { targets: "defaults" }]
                ]
              }
            }
          },
          {
            test: /\.(css|scss)$/,
            include: /node_modules/,
            use: [
              'style-loader',
              'css-loader',
              'sass-loader'
            ]
          },
          {
            test: /\.(css|scss)$/,
            exclude: /node_modules/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: true
                }
              },
              'sass-loader'
            ]
          },
          {
            test: /\.(png|svg|jpg|gif)$/,
            loader: 'file-loader'
          }
        ]
      },
      target:'node',
      resolve: {
        extensions: ['.js', '.jsx']
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        //new webpack.NamedModulesPlugin(),
        new NodePolyfillPlugin(),
        new ESLintPlugin(EslintOptions),
        new CleanWebpackPlugin(),
        //new webpack.HotModuleReplacementPlugin(),
        HtmlWebpackPluginConfig
        // new HtmlWebpackPlugin({
        //   template: './src/index.html'
        // }),
      ],
      devtool: 'eval-source-map',
        devServer: {
          
            port:3010,
            static:{
              directory: './public'
            },
            historyApiFallback: true,
            hot: true
          },
      mode: 'development'
    };

HTML 文件 index.html 是 -

        <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Ethereum Ecommerce Store</title>
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>

此外，我在运行本地主机时在控制台中收到此错误。

Uncaught ReferenceError: require is not defined
at Object.util (app.bundle.js:245:1)
at __webpack_require__ (app.bundle.js:274:33)
at fn (app.bundle.js:415:21)
at eval (index.js?ce24:2:12)
at Object../node_modules/console-browserify/index.js (app.bundle.js:40:1)
at __webpack_require__ (app.bundle.js:274:33)
at fn (app.bundle.js:415:21)
at eval (log.js:1:41)
at Object../node_modules/webpack/hot/log.js (app.bundle.js:190:1)
at __webpack_require__ (app.bundle.js:274:33)

Answer 1

你不应该使用

externals:[nodeExternals()]

在您的 webpack.config.js 文件中。

指定它将要求 webpack 使用 nodejs（后端）require() 来获取依赖项。

客户端（浏览器 web api）不提供 require() 作为函数，因此在您的本地主机上出现错误。

删除配置应该可以修复错误。

Webpack 不在本地主机上呈现任何内容。它在 html 中附加了脚本标签，但主页上没有显示任何内容

Webpack not rendering any content on localhost. It is attaching the script tag in html but nothing is displayed on the homepage

javascript

reactjs

webpack