4
私はreactjsフロントエンドで始まったfeathersjsアプリを手に入れようとしています。 webpack-dev-middlewareとwebpack-hot-middlewareを使用すると、私は開発中にすべてのこのwebpackのもので羽毛アプリを拡張することができます。唯一の問題は、webpackからjsファイルを取得するたびに常に404のページが表示されてしまうことです。feathers/expressでwebpack-dev-middlewareを使用するには？
Currrently、ここに私のディレクトリ構造があります：
/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。