4

私は、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時間を費やしましたが、どこにも行きませんでした。これは、より多くのコンテキストについて作業しているレポへのリンクです。

4

1 に答える 1

4

Feathers の notFound ミドルウェアが 404 を返す前に使用される、 feathers/src/middleware/index.jsの適切な場所に webpack dev/hot ミドルウェアを含めることで、これが機能することがリポジトリからわかります。ミドルウェアの順序大事！

react/middleware.jsで行ったように、この目的のために関数をエクスポートすることは、バックエンド自体から webpack ミドルウェアを設定する懸念を分離するため、この問題に対するクリーンな解決策です (すべての webpack のものはフロントエンドに残ります)。

これが他の誰かに役立つことを願っています!

于 2016-11-18T03:09:58.600 に答える