webpack-dev-server配置html热更新
我学前端Ajax的时候，最开始是用python自带的http模块，运行python -m http.server来起个服务，测试Ajax请求，后面知道用npm安装依赖了，用上了live-server，还能监听html文件的实时更新，这什么神仙依赖，太省事了，再后面用上了vscode的Live Server插件，体验和live-server差不多，再后面，学习JavaScript，学习ES6，被import、还有一些不兼容的新语法特性，搞得头大，就开始学习用webpack、babel来处理js语法。
webpack的官方文档啃起来费劲，但网上的webpack教程又和最新的webpack5版本有不少差异，像file-loader、clean-webpack-plugin这些webpack4以前在用的loader或者plugin，在webpack5里面也不用了，配置文件的写法有些变化，所以虽然webpack的核心思想和配置字段没大改，细节的地方还是得去啃官方文档。
前两天是写个landing页，直接在原来的一个工程里，新建了一个文件夹，开始写html，突然发现，单独对一个html文件配置webpack热更新失败了，我就开了个demo，具体尝试一下，demo目录结构为：
home.html
index.js
node_modules/
webpack.dev.js
安装的npm包有：
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
我刚开始以为直接在index.js里面引入home.html，就能生效了：
index.js
import './home.html'
此时的webpack.dev.js配置:
webpack.dev.js
module.exports = {
entry:'./index.js',
mode: 'development',
devtool:'inline-source-map',
devServer:{
port:9999,
hot:true,
open:true
},
module:{
rules:[
{
test: /\.html$/,
use: ['html-loader'],
exclude: /node_modules/,
},
]
},
}
运行npm run dev，webpack devServer能起来，终端输出没报错，浏览器也能打开localhost:9999地址，不过显示的是一个错误界面：Cannot GET /，控制台报错Failed to load resource: the server responded with a status of 404 (Not Found)；
这里是在
package.json里增加了一个script，"dev": "webpack serve --config webpack.dev.js"，能直接npm run dev调用
在webpack.dev.js的rules中，加上了babel-loader也还是一样，所以还是没有生成html文件，后面试着加上了html-webpack-plugin插件，就能监测home.html文件的更改了，我以前都是只把这个插件用在生产环境下，插件的git仓库里面给出来的示例也是生产环境的，还真没往这方面想。
贴一下更新后的webpack.dev.js：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./index.js',
mode: 'development',
devtool:'inline-source-map',
devServer:{
port:9999,
hot:true,
open:true
},
module:{
rules:[
{
test: /\.html$/,
use: ['html-loader'],
exclude: /node_modules/,
},
]
},
plugins: [
new HtmlWebpackPlugin({
template:'./home.html'
}),
],
}
这样再运行devServer的话，修改home.html页，就能实时在http://localhost:9999中看到更改了；
。写Vue组件写多了，vue.config.js里的配置基本也是从其他工程里沿用过来的，这些打包构建的基础配置都折腾不明白了，惭愧，记录一下。