快速服务器提供的 Webpack 包 - 找不到包答案

【问题标题】：Webpack bundle served by express server - can't find bundle快速服务器提供的 Webpack 包 - 找不到包
【发布时间】：2017-02-13 12:13:16
【问题描述】：

您好，这是我正在尝试设置以与 webpack 一起使用的快速服务器。

const Server = require('./server.js')
const path = require('path')
const port = (process.env.PORT || 3001)
const app = Server.app()

if (process.env.NODE_ENV !== 'production') {
  const webpack = require('webpack')
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware')
  const config = require('./webpack.config.js')
  const compiler = webpack(config)

  app.use(webpackHotMiddleware(compiler))
  app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: path.join(__dirname, '/build')
  }))
}

app.listen(port)
  console.log(`Listening at http://localhost:${port}`)

./app.js

const path = require('path')
const express = require('express')

module.exports = {
  app: function () {
    const app = express();
    const indexPath = path.join(__dirname, '/build/index.html');
    const publicPath = express.static(path.join(__dirname, '/build'));

    app.use('/build', publicPath);
    app.get('/', function (_, res) { res.sendFile(indexPath) });

    return app;
  }
}

./server.js

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

var BUILD_DIR = path.resolve(__dirname, '/build');

var config = {
  entry: path.resolve(__dirname,'app/main.js'),
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/build/'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react']}},
      { test: /\.sass$/, loaders: ['style', 'css', 'sass'] },
      { test: /\.css$/, loader: "style!css" },
      { test: /\.png$/, loader: "url-loader?prefix=img/&limit=5000" },
      { test: /\.svg$/, loader: 'babel!svg-react' }
    ]
  }
};

module.exports = config;

./webpack.config.js

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app">
      <script type="text/javascript" src="bundle.js"></script>
    </div>
  </body>
</html>

./build/index.html

当我运行 node app.js 时，它会找到 index.html 页面，但我收到 404 错误“找不到 bundle.js”，我确定某处我指向了错误的目录，但我似乎无法解决！

【问题讨论】：

您的bundle.js 保存在哪里？它在你的BUILD_DIR（或）其他地方吗？
bundle.js 应该由 webpack 输出到 BUILD_DIR (./build)
在这种情况下，在您的 var config 声明中，您的 filename 应该更改为 filename: './bundle.js', 对吧？
既然我通过了路径应该没问题，但我还是尝试了，但仍然没有
好的，最后一个问题，您的build.html 和您的bundle.js 文件是否位于同一目录中？

标签： javascript node.js express webpack webpack-dev-server

【解决方案1】：

当您在 / 上提供 build/index.html 时，它会查找文件 /bundle.js（您启动服务器的目录），该文件显然不存在。使用您的 Webpack 配置，如果您运行 Webpack，您将创建文件 /build/bundle.js。

现在webpack-dev-middleware 出现了。它不是创建该文件，而是在命中相应路径时从内存中提供捆绑包。您所需要做的就是通过在 ./app.js 中设置 publicPath 来告诉中间件您要在 / 上提供捆绑包。

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: '/'
}))

您也不需要在/build 上提供任何服务。但是如果你想用它来测试你的实际文件系统构建的包，你需要运行 Webpack 来生成那个包。为了使其正常工作，您需要将您的 BUILD_DIR 更正为：

var BUILD_DIR = path.resolve(__dirname, './build');

原因是path.resolve 将/build 视为绝对路径，并没有将其添加到当前目录中。除非您以 root 身份运行，否则这也会引发权限被拒绝错误。更多信息请见：https://nodejs.org/docs/latest/api/path.html#path_path_resolve_paths

【讨论】：

你知道嵌套路由吗？我有几乎完全相同的设置，但是当我尝试点击类似以下内容时：'/test' 节点要么找不到 index.html 要么 'Cannot GET /test'。我在前端使用 React / browserHistory
@user2465134 您需要为这些路由提供/index.html，例如在没有其他路由匹配时提供它。但是你必须确保你不会意外地提供它而不是你的 JavaScript 或任何资产。这称为历史 API 回退，并且存在可以为您处理的插件/中间件。
迈克尔，你能看看我的帖子吗？ stackoverflow.com/questions/47259027/…。它显示了我的设置，可以为您提供更多背景信息
Michael，我使用 History API Fallback，并且我有应该发送 index.html 的通配符路由。由于 index.html 通过 webpack-dev-server 在内存中，History API Fallback 应该为它服务，但它似乎没有