為靜態頁面設置webpack熱加載/ HMR

Question

我知道標題沒有太大意義。 但是請忍受我。

我正在為使用舊的靜態ERB的舊版Rails應用設置React。 由於規模大，我必須緩慢地轉向SPA，這意味着要交換頁面上的組件。

我當前的設置是使用webpack編譯捆綁文件，然后將其輸出到資產目錄。 然后，僅依靠資產管道來將捆綁文件加載到頁面上進行緩存（不知道，但足以上手）。 在具有react組件的頁面上，我將有一個<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>

這是基本設置。 但是為了加快開發速度，我想設置熱加載。 但是，由於我沒有提供整個頁面，因此我必須將捆綁文件實際寫入磁盤，以便Rails可以將其拾取。 而且這也阻止了我使用webpack-dev-server。

有什么方法可以在此設置中設置HMR？

可能的選擇：

時不時地重新加載捆綁文件（但我已經嘗試過通過添加新的腳本標簽並刪除舊的腳本標簽來進行此操作。盡管已下載了腳本文件（“網絡”標簽中的狀態為200），但未加載更新的腳本）
以編程方式刷新頁面，並將序列化狀態存儲在會話存儲中（這不是理想的選擇，因為它還會刷新靜態頁面的其他部分）
也許有一種方法可以通過webpack-dev-server只提供捆綁文件？

編輯

我遵循了@SamHH的答案，似乎無法加載捆綁文件（404）。 我的路徑配置有點古怪。

我的webpack輸出路徑為

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

publicPath到

/admin/

但是在proxy選項中設置的匹配路徑不太起作用。 從“網絡”標簽中，看起來它是從/javascripts/...加載的/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
  }
};

Answer 1

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

例如，如果您將Webpack配置設置為output.publicPath: '/dev-assets/'則可以執行以下操作：

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

然后在開發時加載http://localhost:9000 。

為靜態頁面設置webpack熱加載/ HMR

問題描述

1 個解決方案

解決方案1
0 2017-06-02 16:52:01

為靜態頁面設置webpack熱加載/ HMR

問題描述

1 個解決方案

解決方案1 0 2017-06-02 16:52:01

解決方案1
0 2017-06-02 16:52:01