Question

我知道标题没有多大意义。但请耐心等待。

我正在为使用旧的静态ERB的旧Rails应用程序设置React。由于规模，我必须慢慢走向SPA，这意味着在页面上交换组件。

我目前的设置是使用webpack编译一个bundle文件，将它输出到assets目录。然后只需在依赖资产管道的页面上加载该bundle文件进行缓存（不知道，但足以开始）。在具有react组件的页面上，我将有一个<div>用于附加某个组件。 e.g：

<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>

这是一个基本设置。但为了加快开发速度，我想设置热负载。但是，因为我没有服务整个页面，所以我必须将bundle文件写入磁盘，以便rails可以将其拾取。这也阻止我使用webpack-dev-server。

有没有办法在此设置中设置HMR？

可能的选择：

不时重新加载捆绑文件（但我通过添加新脚本标记并删除旧标记来尝试此操作。虽然下载了脚本文件（来自网络选项卡的200状态），但更新的脚本不是加载）
以编程方式刷新页面，并将序列化状态存储在会话存储中（这不太理想，因为它还会刷新静态页面的其他部分）
也许有办法通过webpack-dev-server只提供捆绑文件？

修改

我跟着@SamHH回答，似乎无法加载捆绑文件（404）。我的路径配置有点古怪。

我有我的webpack输出路径

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

publicPath to

/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
  }
};

Answer 1

您可以使用webpack-dev-server并将所有非资产代理回您的Rails应用。因此，如果您的rails应用程序在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。

为静态页面设置webpack热负载/ HMR

1 个答案: