Express 无法获取/错误我的Web包开发中间件安装程序_Express_Webpack_Webpack Dev Server_Webpack Dev Middleware

Express 无法获取/错误我的Web包开发中间件安装程序

express webpack

Express 无法获取/错误我的Web包开发中间件安装程序,express,webpack,webpack-dev-server,webpack-dev-middleware,Express,Webpack,Webpack Dev Server,Webpack Dev Middleware,首先，我在这里发现了许多类似的主题，但即使在参考了它们之后，我仍然无法让它工作所以，我的问题很简单，就是在运行express server（使用npm run service）之后，当我访问localhost:3000时，我在Chrome中获取而无法获取/。并不是它找不到bundle.js文件；它根本找不到index.html 在package.json文件中运行npm run serve脚本时，我在服务器控制台上没有看到任何错误。Webpack构建（从Webpack开发中间件调用）日志也没有

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

所以，我的问题很简单，就是在运行express server（使用

npm run service

）之后，当我访问

localhost:3000

时，我在Chrome中获取

而无法获取/

。并不是它找不到bundle.js文件；它根本找不到index.html

在package.json文件中运行

npm run serve

脚本时，我在服务器控制台上没有看到任何错误。Webpack构建（从Webpack开发中间件调用）日志也没有显示任何错误

如果我直接从终端运行webpack dev server并访问同一URL，它将正常工作。（我已通过

webpack.config.js

中的

devServer

选项覆盖主机和端口，以匹配我在express server中使用的主机和端口）

我做错了什么

文件夹结构

/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'),
  }
};

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

/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>

问题是，您实际上没有在webpack块中的任何位置提供

index.html

。您应该使用插件，比如在内存中提供插件，或者使用express的静态功能，我认为更理想的解决方案（更多的webpack方式）是前者

下面是使用

html网页包加载器的示例
(as one of the plugins in webpack config.)

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

你的npm run serve
脚本是什么？@LeeHanKyeolnodemon server/server.js
你说的是开发
（不是生产
）环境？@LeeHanKyeol是的，在生产中，你不需要这些。我没有设置NODE_ENV变量，因此它进入webpack dev中间件块。我在控制台上看到了webpack构建日志，所以它进入了正确的块。明白了。谢谢