为静态页面设置webpack热负荷/ HMR
我知道这个标题没什么意义。但请容忍我。
我正在为一个遗留的Rails应用程序设置React，它使用的是好的、旧的静态ERB。由于规模的原因，我不得不慢慢地转向SPA，这意味着在页面上交换组件。
我目前的设置是使用webpack编译一个包文件，输出到资产目录。然后，只需在页面上加载该包文件，依赖于资产管道进行缓存(这不是概念，而是足够开始)。在有响应组件的页面上，我将有一个<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开发服务器。
在这个设置中有什么方法可以设置HMR吗？
可能的备选方案：
- 不时地重新加载包文件(但我尝试过添加新的脚本标记，并删除旧的脚本标记)。虽然下载了脚本文件(200状态来自网络选项卡)，但更新后的脚本没有加载)
- 以编程方式刷新页面，并将序列化状态存储在会话存储中(这并不理想，因为它还刷新静态页的其他部分)
- 也许有一种方法可以通过webpack开发服务器只提供包文件？
编辑
我遵循@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
}
};回答 1
Stack Overflow用户
发布于 2017-06-02 16:52:01
您可以使用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。
https://stackoverflow.com/questions/44333817
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号