gpt4 book ai didi

webpack - 如何在 webpack-dev-server 运行期间为静态 index.html 页面更新 bundle.js?

转载 作者:行者123 更新时间:2023-12-01 10:35:37 25 4
gpt4 key购买 nike

我运行这个命令:

webpack-dev-server --content-base deployment/deployment --hot --inline

这会正确启动我的网站。然后我用错误的语法更新了 randomFile.js(插入“abc”),这会导致 lint 错误或某种故障。当我保存 randomFile.js 时,webpack 报告“webpack: bundle is now valid”并显示我修改的文件以及其他两个文件(不知道为什么其他 2 个文件在那里)。 Webpack 还报告发出“bundle.js”和“guid.hot-update.json”。

网站不会更新。

我检查了时间戳

deployment/deployment/js/bundle.js

而且还没有更新。

webpack.config.js(也有 .dev 和 .prod 版本,它们似乎被 webpack-dev-server 忽略)

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
devtool: 'eval',
entry: [
'webpack-hot-middleware/client',
'./src/main.js'
],
output: {
path: path.join(__dirname, 'deployment/deployment/js'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.jpg/,
loader: 'file'
}, {
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]}, {
test: /\.scss$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url',
'sass?sourceMap'
]
},{
loader:'babel-loader',
exclude: path.resolve(__dirname, "node_modules"),
test: /\.js/
}]
}
}

更新

学习了webpack-dev-server不更新原来的bundle.js我想我知道问题出在哪里了。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Site</title>

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bundle.css" />

<input type="hidden" id="myUrlConfigValueInput" value="http://localhost/FibReactHello2/js/bundle.js">
<input type="hidden" id="myAPIUrlConfigValueInput" value="http://localhost/mySite/api/">
</head>
<body>
<div id="appEntrypt"></div>
<script src="js/bundle.js"></script>
</body>
</html>

ReactJSappEntrypt 有一个入口点。这里依赖于 bundle.js。因为 webpack-dev-server 不更新这个文件(只更新内存中的文件),所以我的网站永远不会更新。

我该怎么做才能解决这个问题?

最佳答案

经过广泛讨论后,似乎 publicPath 指令导致 webpack 开发服务器提供静态编译的包,而不是开发服务器在内存中生成的包。将 publicPath 更改为 /js/ 修复问题:

webpack.config.js

output: {
path: path.join(__dirname, 'deployment/deployment/js'),
filename: 'bundle.js',
publicPath: '/js/'
},

关于webpack - 如何在 webpack-dev-server 运行期间为静态 index.html 页面更新 bundle.js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36063585/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com