javascript - Express 正在提供 index.html 而不是我的 Webpack 包。我的配置文件有问题吗?

标签 javascript node.js express webpack

我的网站没有加载,因为对 bundle.js 的请求反而返回了 index.html 文件。

这个项目是几年前的,当时它运行良好,但我正试图让它重新启动并运行,但我不确定为什么现在会发生这种情况。如果有人可以提供帮助,我将不胜感激!

文件结构:

- src
  - app
  - db
  - public
     - assets (folder)
     - styles (folder)
     - index.html
  - server
     - auth (folder)
     - routers (folder)
     - server.js
- webpack.config.js

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/app', 'client.jsx'),
  output: {
    path: path.resolve(__dirname, 'src/public/build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src/app'),
        loader: 'babel-loader'
      }
    ]
  },
  devtool: 'source-map'
};

来自 index.html:

<body>
    <div id="app"></div>
    <!-- load the app scripts -->
    <script src="/build/bundle.js"></script>
</body>

来自 server.js:

app.use(express.static(path.resolve(__dirname, '../public')));

app.use('*', function (request, response){
  response.sendFile(path.resolve(__dirname, '../public', 'index.html'))
})

来自 package.json:

"scripts": {
    "start": "webpack --watch | nodemon --ignore node_modules ./src/server/server.js --exec babel-node"
},

来自.babaelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "airbnb"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
      "react-html-attrs",
      "transform-class-properties",
  ]
}

最佳答案

[声望太低无法评论]

一切看起来都很干净,所以我同意@eol 的观点,第一步是实际转译并确认构建按预期工作。

作为一个半相关的旁白,我相信你应该将主请求处理程序中的路径解析移动为一个只被调用和解析一次的常量......可能是一个最小的 yield ,但就目前而言,每个请求都有解决了相同的路径。

const indexFile = path.resolve(__dirname, '../public', 'index.html');
app.use('*', function (request, response) { response.sendFile(indexFile); });

(这与第一个处理程序无关,因为解析只会在调用静态方法时发生一次。)


关于启动脚本:我认为您不想将 webpack --watch 命令的输出传输到 nodemon?您可能希望将 webpack 命令推送到后台运行,然后执行 nodemon。我什至不认为 webpack watch 实际上会退出,所以 nodemon 永远不会被调用?

试试 webpack --watch & nodemon ...

除此之外,我没有看到任何关于构建无法正常工作的原因...如果您只是在终端的根目录中运行 webpack,它会编译吗?

关于javascript - Express 正在提供 index.html 而不是我的 Webpack 包。我的配置文件有问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66516746/

相关文章:

javascript - 获取数组中的最后一项

javascript - Twilio 客户端聊天 - 发送媒体消息

node.js - Slack 机器人在与其他用户第一次对话后无法进行通信

node.js - mongoose 是否修复了唯一且稀疏且可以采用空值的索引

javascript - 你如何用 winston 捕获 `Error: ENOENT: no such file or directory`?

json - 将 JSON 传递给 HTTP POST 请求

javascript - 使用 HTML-CSS-JS 在触摸事件上播放 MP3

javascript - 如何在发送前将数据附加到 XHR 请求?

node.js - nodemon 给出此错误代码 : 'EADDRINUSE' , errno : -4091, syscall : 'listen' , 地址 : '::' , 端口:5000

javascript - 为什么我不断收到 TypeError : User is not a constructor?