爲靜態頁面設置webpack熱載/ HMR

我知道標題沒有太多意義。但請耐心等待。爲靜態頁面設置webpack熱載/ HMR

我正在爲使用良好的舊靜態ERB的傳統Rails應用程序設置React。由於規模，我必須慢慢地轉向SPA，這意味着在頁面上換出組件。

我目前的設置是使用webpack編譯一個bundle文件，將其輸出到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）。我的路徑配置有點古怪。

我有我的WebPack輸出路徑

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

publicPath到

/admin/

但proxy選項設置匹配路徑也不太工作。而從網絡選項卡上，看起來就像是從/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

您可以使用webpack-dev-server和代理所有非資產回你的Rails應用程序。因此，如果您的rails應用程序位於http://localhost:8000上，則您告訴Webpack配置將所有與您的資產glob不匹配的devServer請求代理回該地址。然後，您將加載並開發Webpack開發服務器端口。

例如，如果您設置的WebPack配置如下output.publicPath: '/dev-assets/'那麼你就可以做到以下幾點：

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'。這會將所有非資產請求（每個glob）代入（大概）http：// localhost：8000'到您的Rails應用程序，所以其他一切繼續工作，就好像您沒有更改端口一樣。 – SamHH

聽起來像一個計劃。我要測試一下並回來。謝謝 –

爲靜態頁面設置webpack熱載/ HMR

回答

相關問題