无法获取 / 在 webpack 中运行 hello world 出现错误

Question

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

我运行

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

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

无法获取 /

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

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

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')
);

- P.Brian.Mackey

Answer 1

原来我把 index.html 文件放错了位置。根据 webpack 文档，为了加载打包后的文件，需要在构建文件夹中创建一个 index.html 文件，从中提供静态文件（--content-base选项）。

我复制了 index.html 文件到一个新建的名为 deployment 的文件夹中，以匹配我在 output.path 中指定的内容。

- P.Brian.Mackey

Answer 2

在 webpack.config.js 文件中添加以下内容：

devServer: {
  historyApiFallback: true,
}

- Manuel Carmona

---

只有在使用React路由器时，此内容才相关。 - Liam

@Liam 无论使用哪个框架，这对于任何使用客户端路由的SPA都是相关的。 - undefined

Answer 3

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

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

- Dmitry Sergeev

---

writeToDisk is not exist- options has an unknown property 'writeToDisk'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? } - elliotching

@elliotching 它在Webpack 4的devMiddleware下面。https://webpack.js.org/configuration/dev-server/#devserverdevmiddleware - Mike

Answer 4

我曾经遇到过同样的问题，解决方法是在我的webpack.config.js文件中添加以下代码。

static: {
  directory: path.join(__dirname, '/')
}

请将以下内容作为devServer的额外选项添加：

'/'表示您应用程序的根文件夹。

- Dwain B

Answer 5

• 您需要运行 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"
            },

        ]
    }
}

- Ziggy