javascript - webpack 热替换出现 Cannot find update
本文介绍了javascript - webpack 热替换出现 Cannot find update的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在使用 Webpack 打包的时候,因为老是会在别的地方使用生成的 HTML 文件,所以想使用热替换动态更新代码,但是在更新代码后会出现 can't find updata 这个问题。
这个是更新代码之后,浏览器里出现的提示:
下面是 server 所用的代码:
import webpack from 'webpack'
import WebpackDevServer from 'webpack-dev-server'
import config from './webpack.config'
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
headers: {
"Access-Control-Allow-Origin": "*"
}
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err)
}
console.log('Listening at http://localhost:3000/')
})
下面是 webpack.config.js 的代码:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/app.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'build.js',
publicPath: 'http://localhost:3000/'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
}
]
},
devtool: '#eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
]
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
])
}
以这些资料作为参考做的:
github:xwartz/electron-hot-boilerplate
在 Electron 中使用模块热替换
解决方案
vue-loader
内部依赖了vue-hot-reload-api
,所以理论上不会出现你这个问题。
你截图的问题就是webpack
的热替换插件实在没看到有任何一步处理了这次变化,没办法,他只能做全局刷新了。你再看看你的代码吧,是不是哪里依赖装错或者怎么样了。我有一个项目vue-memory-game,也是vue
写的,我的热替换是ok的,要不你对照下,看看哪里配置不一样
这篇关于javascript - webpack 热替换出现 Cannot find update的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文