webpack-dev-server 热更新(HMR) 浏览

环境:
webpack 4.16.5
webpack-dev-server 3.1.5
vue 2.5.17

---

源码地址:https://github.com/appbanana/vue-elm.git 然后找对应分支develop-0.0.1

热更新的实现模式分两种,一种是iframe模式,另外一种是inline模式。

1. 热更新第一种实现

使用iframe模式,iframe模式就是让你的页面嵌入到一个iframe中显示(见下图) 使用这个模式不需要在webpack的配置文件中做任何的配置，但需要改变页面的访问路径，比如要访问根目录下的首页，源链接是 http://localhost:8080/index.html 需要换成http://localhost:8080/webpack-dev-server/index.html 接下来你就可以尝试更改你的样式,看一下有木有立即刷新

123.png

2. 热更新第二种实现

参考webpack官网配置 ,需要配置webpack,还需要一个devServer.js的文件,最后用node devServer.js 启动就可以了,接下来我把我的代码贴出来,以供大家参考
webpack.config.dev.js
、、、
var path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack');

// const WebpackCleanupPlugin = require('webpack-cleanup-plugin')

module.exports = {
mode: "development",
entry: {
app: './src/main.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
devtool: 'inline-source-map',
resolve: {
extensions: ['.js', '.vue', '.less', '.css'],
alias: {
vue: 'vue/dist/vue.js',
'src': path.resolve(__dirname, '../src'),
}
},
module: {
rules: [
{
test: /.vue/,
// 限制范围，提高打包速度
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /.css$/,
// 限制范围，提高打包速度
include: path.join(__dirname, 'src'),
exclude: /node_modules/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './index.html', // 源模板文件
filename: './index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】
showErrors: true,
inject: 'body',
}),
new CleanWebpackPlugin(['dist']),
new webpack.HotModuleReplacementPlugin()

]

}
、、、

devServer.js如下
、、、

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

var config = require("./webpack.dev.config.js");
const options = {
contentBase: './dist',
hot: true,
host: 'localhost'
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
console.log('dev server listening on port 5000');
});
、、、