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

【问题标题】：How to use webpack-dev-middleware with feathers / express?如何使用带有羽毛/快递的 webpack-dev-middleware？
【发布时间】：2016-08-02 14:38:12
【问题描述】：

我正在尝试使用 reactjs 前端启动一个 feathersjs 应用程序。使用webpack-dev-middleware 和webpack-hot-middleware，我应该能够在开发过程中使用所有这些webpack 东西简单地扩展羽毛应用程序。唯一的问题是每当我从 webpack 获取 js 文件时，总是会得到一个羽毛 404 页面。

目前，这是我的目录结构：

/feathers/public/index.html
/feathers/src/app.js
/react/src/index.js
/react/webpack.config.js
/react/develop.js

/feathers/src/app.js 是默认的羽毛应用，提供来自公共文件夹的静态文件。

.use('/', serveStatic( app.get('public') ))

在/react/develop.js 中，我需要羽毛应用程序并使用 webpack 中间件对其进行扩展。

const app = require('../feathers/src/app');
const config = require('./webpack.config');
const path = require('path');
const webpack = require('webpack');

var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  publicPath: '/',
  stats: {colors: true},
}));

app.use(require('webpack-hot-middleware')(compiler));

const port = app.get('port');
const server = app.listen(port);
server.on('listening', () =>
  console.log(`Feathers application started on ${app.get('host')}:${port}`)
);

遗憾的是，这根本不起作用。供参考，这是我的/react/webpack.config.js

var webpack = require("webpack")

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    'src/index.js'
  ],
  output: {
    path: '/',
    filename: "bundle.js",
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: "babel", exclude: /node_modules/, query: { presets: ['es2015', 'react', 'stage-0'] } },
      { test: /\.(svg|png|jpe?g|gif|ttf|woff2?|eot)$/, loader: 'url?limit=8182' },
    ]
  },
  resolve: {
    root: [
      __dirname,
      __dirname + '/src',
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ]
}

还有/feathers/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

我试过弄乱 publicPath 的东西，但没有运气。任何想法如何让这个工作？我在这上面花了整整 2 个小时，却一无所获。 Here's a link to the repo I'm working with for more context.

【问题讨论】：

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

【解决方案1】：

我从您的存储库中看到，您可以通过将 webpack dev/hot 中间件包含在适当的位置（feathers/src/middleware/index.js）中，在 Feathers 的 notFound 中间件返回 404 之前使用它们。中间件顺序很重要！

像在react/middleware.js 中那样为此目的导出一个函数是解决这个问题的一个干净的解决方案，因为它将设置 webpack 中间件的问题与后端本身隔离开来（所有 webpack 的东西都保留在前端）。

希望这对其他人有帮助！

【讨论】：