![](/img/trans.png)
[英]webpack-dev-middleware and Express - can't get them to collaborate
[英]How to use webpack-dev-middleware with feathers / express?
我正在尝试使用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
是默认的/feathers/src/app.js
应用程序,从公用文件夹提供静态文件。
.use('/', serveStatic( app.get('public') ))
在/react/develop.js
,我需要使用feat应用程序并使用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个小时坚持这个并没有在哪里。 这里是我正在处理的repo的链接,以获取更多上下文 。
我从你的存储库中看到你通过将webpack开发/热中间件包含在适当的位置,在feat / src / middleware / index.js中 ,在Feathers的notFound中间件返回404之前将使用它们来实现这一点。 中间件订单问题!
像在react / middleware.js中那样为此目的导出函数是解决这个问题的一个干净的解决方案,因为它隔离了从后端本身设置webpack中间件的问题(所有webpack东西都停留在前端)。
希望这有助于其他任何人!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.