如何解决带Hook的React App的多个入口点的Webpack Dev Server错误
在将配置转换为允许多个入口点之前,我的带有钩子的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 举报,一经查实,本站将立刻删除。