在使用 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的,要不你对照下,看看哪里配置不一样