我的 webpack-dev-middleware 设置无法获取 / 错误

Posted

技术标签:

【中文标题】我的 webpack-dev-middleware 设置无法获取 / 错误【英文标题】：Cannot GET / error with my webpack-dev-middleware setup 【发布时间】：2017-10-29 05:53:36 【问题描述】：

首先，我在这里发现了许多类似的主题，但即使参考了它们，我仍然无法让它发挥作用。

所以，我的问题很简单，就是当我在运行我的 express 服务器（使用 npm run serve）后访问 localhost:3000 时，我在 Chrome 中得到了 Cannot GET /。并不是找不到 bundle.js 文件；它根本找不到 index.html。

当我在 package.json 文件中运行 npm run serve 脚本时，我在服务器控制台上看不到任何错误。 Webpack 构建（从 Webpack-dev-middleware 调用）日志也没有显示错误。

如果我直接从终端运行 webpack-dev-server 并访问相同的 URL，它可以正常工作。 （我已经通过webpack.config.js 中的devServer 选项覆盖了主机和端口以匹配我在快速服务器中使用的主机和端口。）

我做错了什么？

文件夹结构

/client
    /main.js    
/dist
    /index.html
    /assets/
/server
    /server.js
/webpack.config.js
/package.json

webpack.config.js

const path = require('path');

module.exports = 
  entry: './client/main.js',

  output: 
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  ,

  module: 
    rules: [
      
        use: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /node_modules/,
      ,
      
        use: ['style-loader', 'css-loader', 'sass-loader'],
        test: /\.scss$/
      
    ]
  ,

  devServer: 
    host: 'localhost',
    port: 3000,
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, 'dist'),
  
;

/dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Webpack-Dev-Middleware Test</title>
  </head>
  <body>
    <div id="app-container">
    </div>
    <script src="/assets/bundle.js"></script>
  </body>
</html>

/server/server.js

const express = require('express');
const path =  require('path');
const app = express();
const port = process.env.PORT || 3000;

if (process.env.NODE_ENV !==  'production') 

  var webpackDevMiddleware = require("webpack-dev-middleware");
  var webpack = require("webpack");
  var config = require('./../webpack.config');
  var compiler = webpack(config);
  app.use(webpackDevMiddleware(compiler, 
    publicPath : config.output.publicPath,
  ));

 else 

  app.use(express.static(path.resolve(__dirname + '/../dist/')));
  app.get('*', (req, res) => 
    res.sendFile(path.resolve(__dirname + '/../dist/index.html'));
  );



app.listen(port, () => console.log('Started on port:', port));

【问题讨论】：

npm run serve 的脚本是什么？ @LeeHanKyeol nodemon server/server.js 你说的是development（不是production）环境？ @LeeHanKyeol 是的，在生产中，您不需要任何这些。我没有设置 NODE_ENV 变量，所以它进入了 webpack-dev-middleware 块。我在控制台上看到了 webpack 构建日志，所以它进入了正确的块。 【参考方案1】：

问题是你并没有真正在 webpack 块中的任何地方提供index.html。您应该使用诸如 html-webpack-loader 之类的插件在内存上提供它或使用 express 的静态函数，我认为更可取（更多 webpack 方式）的解决方案是前者。

下面是使用html-webpack-loader的例子。

(as one of the plugins in webpack config.)

new HtmlWebpackPlugin(
  filename: 'index.html',
  template: './dist/index.html',
  title: 'Your website'
)

【讨论】：

知道了。谢谢！

以上是关于我的 webpack-dev-middleware 设置无法获取 / 错误的主要内容，如果未能解决你的问题，请参考以下文章

如何使用带有羽毛/快递的 webpack-dev-middleware？

webpack-dev-server和webpack-dev-middleware的区别

用 express + webpack-dev-middleware/webpack-hot-middleware 替换 webpack-dev-server

javascript 使用Webpack-dev-middleware对Express.js配置示例，以允许后端身份验证。

为 Koa 框架封装 webpack-dev-middleware 中间件

webpack-dev-middleware 和 webpack-hot-middleware 实现express全栈热更新。