Question

我正在尝试使用webpack捆绑我的React应用程序以进行客户端呈现，并在标记中包含bundle.js。但是，每当我运行我的应用程序时，我都会为bundle.js获得404（未找到）。这是我的webpack.config.js：

webpack.config.js

const path = require('path');

const config = {
  entry: ['babel-polyfill', './views/Index.jsx'],
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' }
    ]
  }
};

module.exports = config;

./views/Index.jsx指向我的主模板文件，如下所示：

Index.jsx

import React from 'react';
import Layout from './Layout.jsx';
import Cube from './components/Cube/Cube.jsx';

class Index extends React.Component {
  render() {
    return (
        <Layout title={this.props.title}>
            <Cube />
        </Layout>
    );
  }
}

export default Index;

Layout.jsx所在的位置<script src="/public/bundle.js">

Layout.jsx

import React from 'react';

class Layout extends React.Component {
  render() {
    return (
      <html>
        <head>
          <title>{this.props.title}</title>
          <script type="text/javascript" src="/public/bundle.js"></script>
        </head>
        <body>
          {this.props.children}
        </body>
      </html>
    );
  }
}

export default Layout;

任何人都可以帮助我理解为什么这不起作用？如果有帮助，这是我的完整项目：https://github.com/MarksCode/PersonalWebsite

我认为可能与我使用服务器端呈现express-react-views包错误有关吗？

谢谢！

Answer 1

看起来你根本没有告诉express公共文件夹。您需要明确知道公用文件夹应该提供静态文件，如下所示：

app.use(express.static('public'))

这里的文件： https://expressjs.com/en/starter/static-files.html

bundle.js 404（未找到）

1 个答案: