带Hook的React App的多个入口点的Webpack Dev Server错误

编程问答 2022-08-23

问题描述

在将配置转换为允许多个入口点之前，我的带有钩子的react应用程序在webpack devserver上运行良好。现在，当我运行相同的脚本脚本webpack-dev-server --hot --mode development --env.NODE_ENV=development并在浏览器中打开http：// localhost：8080 /时，我得到“无法获取/”。我在做什么错了？

构建后终端输出看起来不错：

$ webpack-dev-server --hot --mode development --env.NODE_ENV=development
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from {removed for brevity}/dist
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: e45f7a36fc8bdca8edb6
Version: webpack 4.42.0
Time: 4904ms
Built at: 08/11/2020 11:40:59 AM
                               Asset        Size  Chunks             Chunk Names
                   ./dist/index.html  1010 bytes          [emitted]  
                   ./dist/print.html  1010 bytes          [emitted]  
076203c089fb8776a9af1f774cca729a.png    7.33 KiB          [emitted]  
27119dc6caf0ef34579277fc47e04091.png    11.3 KiB          [emitted]  
2fde2afc1b2f2678017866b0a842c0f0.png    7.67 KiB          [emitted]  
388452a294715e1e38697b924415be4c.png    8.88 KiB          [emitted]  
499d9b545f4bf7448efd79a05ae50fa9.png    10.4 KiB          [emitted]  
4cfb1ea673e03372d54851addd95ffab.png    9.54 KiB          [emitted]  
54aa24ec5557c031f59f289549d07173.png    7.32 KiB          [emitted]  
5595fac7e9b84956c198eaf540871984.png    9.69 KiB          [emitted]  
5b9c2d4502db2a878afb7d19ad503ac9.png    11.1 KiB          [emitted]  
76e59fbcc35839483d0fd8230030f913.png    8.66 KiB          [emitted]  
9ced9326d0e5dce271a86da72ae44738.png    9.19 KiB          [emitted]  
a90a0f1edeee86e4dd49d5c07b595ac6.png    8.43 KiB          [emitted]  
a9df77f8fe5132a8d87b6f627b4d3e8b.png    8.71 KiB          [emitted]  
ab593d72a87c73c68553a3eeba4e6f1f.png    8.61 KiB          [emitted]  
ad067419ad4dbb0328b8d6783b67ed7d.png    6.33 KiB          [emitted]  
b31cbc0aedab9315d89741eeaa3ed92f.png    7.42 KiB          [emitted]  
e5de86ef1e9260949fcd0c943f6f89ea.png    8.49 KiB          [emitted]  
ed53543f8b1bf19705296379f388a27c.png    9.65 KiB          [emitted]  
f1f6630ed0b4e032e13acfc907f6a7b8.png    7.09 KiB          [emitted]  
f204d56ec1f719e19b06b922d4c38ace.png    9.62 KiB          [emitted]  
                             main.js    6.75 MiB    main  [emitted]  main
                            print.js     899 KiB   print  [emitted]  print
Entrypoint main = main.js
Entrypoint print = print.js

这是我的webpack.config.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    main: ["@babel/polyfill","./src/index.js"],print: ["@babel/polyfill","./src/print.js"],},output: {
    path: path.resolve(__dirname,"dist"),filename: "[name].js",publicPath: "/",module: {
    rules: [
      { 
        test: /\.js$/,loader: "babel-loader",exclude: /node_modules/,{
        test: /\.css$/,use: ["style-loader","css-loader"],{
        test: /\.(png|jpg|ico)$/,loader: "file-loader",],plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",chunks: ["main"],filename: "./dist/index.html",}),new HtmlWebpackPlugin({
      template: "./public/index.html",chunks: ["print"],filename: "./dist/print.html",devServer: {
    contentBase: path.resolve(__dirname,historyApiFallback: true,resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom",};

这是我的主要块根index.js：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />,document.querySelector("#root"));

然后，呈现了主要的App组件：

import { hot } from "react-hot-loader/root";
import React from "react";
import { Router,Switch } from "react-router-dom";
import history from "./history";
import { AuthProvider } from "./context/auth";

const App = () => {
  return (
    <AuthProvider>
        <Router history={history}>
          <Switch> ... </Switch>
        </Router>
    </AuthProvider>
  );
};

export default hot(App);

最后，我的打印块根为print.js：

console.log("Hello,Wrold!");

在此先感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-hooksreactjsreactjswebpackwebpackwebpackwebpack-dev-server