无法获取/错误运行 webpack 中的 hello world

Question

完整 Github 项目：https://github.com/pbrianmackey/uiexperiment

我运行

webpack-dev-server --content-base deployment/

然后转到http://localhost:8080/，错误

Cannot GET /

我认为问题是 webpack 配置错误。我检查了 webpack.config.js 文件，没有发现问题。我该如何解决这个问题，以便获得我的 hello world 示例？

也可能是路由问题。我想我可以在没有 react-router 的情况下使用这个网站，但我可能是错的。控制台webpacks输出没有错误

index.js

import "babel-polyfill";//for flipping IE
import $ from 'jquery';
import jQuery from 'jquery';
var App = require('./app');
var React = require('react');
var ReactDOM = require('react-dom')

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Answer 1

原来我把 index.html 放错地方了。来自 webpack docs:

To load your bundled files, you will need to create an index.html file in the build folder from which static files are served (--content-base option).

我在名为 deployment 的新文件夹中复制了 index.html 以匹配我在 output.path

中指定的内容

Answer 2

在 webpack.config.js 中输入：

devServer: {
  historyApiFallback: true,
}

Answer 3

在 webpack-dev-server 文档中，有一个 writeToDisk 选项可以解决这个问题 docs。它将所有文件存储在磁盘上而不是内存中。我的配置示例：

devServer: {
    port: 3000,
    writeToDisk: true,
    proxy: {
        '/': 'http://localhost:8080'
    }
}

Answer 4

您必须运行 node.js 版本 10.13.0+。
添加一个带有出口点的绝对路径'dist'。
需要 Webpack HTML 插件（以访问插件）。
在任务管理器中清除您的开发服务器缓存 ctrl + c &。

我的 webpack.config.js 文件如下所示。

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

module.exports = {
    mode: 'development',
    entry: './starting-code/code/main.js',
    output: 
           {
              path: path.resolve(__dirname, 'dist'),
              filename:'main.js',
           },
    plugins: [new HtmlWebpackPlugin({ template: './starting- 
              code/index.html' })],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.png$/i,
                type: "asset/resource"
            },
            {
                test: /\.txt$/i,
                type: 'asset/source'
            },
            {
                test: /\.(woff|woff2)$/i,
                type: "asset/resource"
            },

        ]
    }
}

无法获取/错误运行 webpack 中的 hello world

Cannot GET / error running hello world in webpack

reactjs

webpack-dev-server

index.js

无法获取/错误 运行 webpack 中的 hello world

Cannot GET / error running hello world in webpack

reactjs

webpack-dev-server

index.js

无法获取/错误运行 webpack 中的 hello world