logo标签列表

如何在 feathers / express 中使用 webpack-dev-middleware？

node.jsexpresswebpackwebpack-dev-serverfeathersjs
4
我正在尝试使用ReactJS前端启动一个FeathersJS应用程序。在开发过程中，使用webpack-dev-middleware和webpack-hot-middleware，我应该能够简单地将所有这些webpack内容扩展到Feathers应用程序中。但是问题在于，每当我从webpack获取js文件时，总是会得到一个Feathers 404页面。
目前，这是我的目录结构：
/feathers/public/index.html
/feathers/src/app.js
/react/src/index.js
/react/webpack.config.js
/react/develop.js

/feathers/src/app.js 是默认的feathers应用程序，它从public文件夹提供静态文件。

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

在/react/develop.js中，我正在要求使用Feathers应用程序，并使用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的设置，但没有成功。有什么办法可以让这个工作起来吗？我已经花了整整两个小时在这上面，却一无所获。 这是我正在使用的repo的链接，以便提供更多背景信息。

1个回答
4

我从你的代码库中看到，你通过在适当的位置包含webpack dev/hot中间件使其正常工作，在feathers/src/middleware/index.js中使用它们，这样它们将在Feathers的未找到中间件返回404之前使用。中间件顺序很重要！

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

希望这对其他人有所帮助！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接