スタティックページ用のWebpackホットロード/ HMRを設定する

タイトルがあまり意味がないことは分かっています。しかし、私と一緒に耐えてください。スタティックページ用のWebpackホットロード/ HMRを設定する

私は、古い静的ERBを使用している従来のRailsアプリケーションに対してReactを設定しています。スケールのために、私はSPAに向かってゆっくりと移動しなければなりません。これは、ページ上のコンポーネントを交換することを意味します。

現在の設定では、webpackを使用してバンドルファイルをコンパイルし、assetsディレクトリに出力しています。その後、キャッシングのためにアセットパイプラインに依存するページにそのバンドルファイルをロードします（アイディアではありませんが、始めるには十分です）。反応コンポーネントがあるページでは、特定のコンポーネントを追加するために<div>が表示されます。例：

<body> 
    <div>some other erb, html stuffs</div> 
    <div>more other erb, html stuffs</div> 

    <div id='react-component-1'></div> 
    <div id='react-component-2'></div> 
</body>

これは基本的な設定として機能します。しかし、開発をスピードアップするために、私はホットローディングをセットアップしたいと思います。しかし、私はページ全体を提供していないので、実際にはバンドルファイルをディスクに書き込んで、レールがそれを取り出せるようにしなければなりません。これによってwebpack-dev-serverを使用することもできません。

この設定でHMRを設定する方法はありますか？

可能なオプション：

は、すべての今して、バンドルファイルをリロード（しかし、私は新しいスクリプトタグを追加し、古いものを削除することによって、これを試してみたスクリプトファイルがダウンロードされているが（200個の状態から。
ページをプログラムでリフレッシュし、セッション記憶域にシリアル化状態を格納します（これは静的ページの他の部分も更新するため理想的ではありません）
多分webpack-dev-serverを通してバンドルファイルだけを提供する方法がありますか？

編集

私は@SamHH答えを踏襲し、バンドルファイル（404）をロードすることはできませんようです。私のパス設定はちょっと風変わりです。

私は

'../../app/assets/webpack/admin'

/admin/

にpublicPathしかしproxyオプションで設定したマッチングパスへの私のWebPACK出力パスを持っているが、非常に動作しませんでした。それは/javascripts/...

のWebPACKの設定からロードされたようにし、ネットワーク]タブから、になります。

const config = { 
    entry: { 
    bundle: './apps/appsRegistration', 
    vendor: VENDOR_LIBS 
    }, 
    output: { 
    filename: '[name].js', 
    path: pathLib.resolve(__dirname, '../../app/assets/webpack/admin'), 
    publicPath: '/admin/' 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor' 
    }), 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     use: 'babel-loader', 
     exclude: /node_modules/, 
     }, 
    ], 
    }, 
    externals: { 
    react: 'React', 
    'react-dom': 'ReactDOM', 
    redux: 'Redux', 
    'react-redux': 'ReactRedux', 
    'redux-thunk': 'ReduxThunk' 
    }, 
    devServer: { 
    port: 9000, 
    disableHostCheck: true, 
    proxy: { 
     '!/admin/**': { 
     target: 'http://localhost:3000', 
     secure: false 
     } 
    }, 
    hot: true 
    } 
};

出典

2017-06-02 Edmund Lee

あなたが戻ってあなたのRailsアプリへwebpack-dev-serverおよびプロキシ以外のすべての資産を使用することができます。したがって、あなたのレールアプリがhttp://localhost:8000にある場合、Webpackの設定に、アセットグロブと一致しないすべてのdevServerリクエストをそのアドレスにプロキシするように指示します。次に、Webpack devサーバーポートでロードして開発します。

は例えば、output.publicPath: '/dev-assets/'を次のように、あなたのWebPACKのコンフィグを設定している場合、あなたは、次の操作を行うことができます開発する際

は

devServer: { 
    port: 9000, 
     proxy: { 
      '!/dev-assets/**': { 
       target: `http://localhost:8000`, 
       secure: false 
      } 
     }, 
     hot: true 
    }, 
}

は、それからちょうど http://localhost:9000をロードします。

出典

2017-06-02 16:52:01 SamHH

開発時に 'port：9000'をロードすると、クライアントサイドページのロードを意味するのでしょうか？ –

はい。 Webpackが生成するURL（この場合は 'http：// localhost：9000'）をブラウザにロードします。これは、おそらく 'http：// localhost：8000'であなたのRailsアプリにグロブごとの非アセット要求をすべて代行するので、他のものはあなたがポートを変更しなかったかのように動作し続けます。 – SamHH

は計画に似ています。私はこれを試して戻ってくるだろう。ありがとう –

スタティックページ用のWebpackホットロード/ HMRを設定する

答えて

関連する問題