个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
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 的东西，但没有成功。任何想法如何让这个工作？我在这上面花了整整 2 个小时，却一无所获。 Here's a link to the repo I'm working with for more context .
最佳答案
我从你的存储库中看到你通过将 webpack dev/hot 中间件包含在适当的位置，在 feathers/src/middleware/index.js 中来实现它。它们将在 Feathers 的 notFound 中间件返回 404 之前使用。中间件顺序很重要!
像在 react/middleware.js 中那样为此目的导出函数是这个问题的一个干净的解决方案，因为它将设置 webpack 中间件的问题与后端本身隔离开来(所有 webpack 的东西都留在前端)。
希望这对其他人有帮助!
关于node.js - 如何在 feathers/express 中使用 webpack-dev-middleware？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36565546/
26
4
0
我是一名优秀的程序员,十分优秀！