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 接下來你就可以嘗試更改你的樣式,看一下有木有立即重新整理

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');
});
、、、