2

私は webpack にバンドルされたフロントエンド アプリケーションを持っています。これは Node バックエンド サーバーによって提供され、通信します。

Webpack ホット開発サーバーが で実行されてい8080ます。ノード バックエンドは で実行されてい1985ます。

Nodeからサービスを提供したいのですindex.htmlが、開発中は最新の開発サーバーからアセットを提供したいと考えています。これを達成するために私は持っています：

webpack config で publicPath の絶対値を設定します。

  output: {
    publicPath: 'http://localhost:8080/'
  },

また、絶対 URL を使用index.htmlして、ホットな開発サーバーを指すようにしました。

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/js/vendors.js"></script>
<script src="http://localhost:8080/js/bundle.js"></script>

そのため、ホットな開発サーバーを実行し、ノード サーバーを実行して を参照できますhttp://localhost:1985。すべてが素晴らしいです。

しかし、本番環境でデプロイ/実行するようになると、これは間違いなく私が望むものではありません. vendors.jsandの相対 URL が必要であり、スクリプトbundle.jsを含めたくありません。webpack-dev-server.js

サーバー上でハンドルバーまたはその他のテンプレートを使用して絶対/相対パスを指定できますが、ホットな開発サーバー スクリプトを削除するクリーンな方法は提供されません。セットアップごとに異なるインデックス ファイルを使用することもできますが、これはすぐにバグにつながるようです。

開発でホットな開発サーバーを使用できるようにするために、これをどのように構造化/展開するのが最善でしょうか?

4

2 に答える 2

1

私たちは現在、あなたが提案したパスのテンプレート化アプローチを行っており、「ビルド」または「開発」しているかどうかを指定する環境変数を導入することで、webpack-dev-server.js スクリプト タグの醜さを緩和しました。

gulp をタスク ランナーとして使用している場合 (私たちは使用しています)、 で設定できますprocess.env.NAME = VALUE。

npm ビルドを使用している場合は、コマンド ラインから--NAME VALUE.

バックエンド サーバーの最後のステップは、index.html テンプレートに適合する変数を作成することです。

    <%
    // connect the hot-reload dev server
    if (mode === 'dev') {
        print("<script type='text/javascript' src='" + webpackURL + "/webpack-dev-server.js'></script>");
    }
    %>
    <script type="text/javascript" src="<%= webpackURL %>/js/bundle.js"></script>
于 2015-03-18T17:03:14.543 に答える
0

まさにこの理由で、私は使用をやめ、代わりに/webpack-dev-serverの組み合わせを使用しました。後者により、既存の Express サーバーにそれらをマウントできるからです。webpack-dev-middlewarewebpack-hot-middleware

私のサーバーは基本的にこれを行います：

const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');

const app = express();

if (process.env.WEBPACK_DEV_SERVER === 'true') {
    const config = webpack(config);
    app.use(webpackDevMiddleware(compiler));
    app.use(webpackHotMiddleware(compiler));
} else {
    app.use(express.static(path.join(__dirname, './dist'));
}

app.use((req, res) => {
    res.status(200).send(`
        <!doctype html>
        <html>
        <head>
            <title>App</title>
        </head>
        <body>
            <div id="root"></div>
            <script src="/bundle.js"></script>
        </body>
        </html>
    `);
});

60fram.esの反応ボイラープレートで完全な例を見ることができます。

于 2016-10-22T22:48:03.017 に答える