12.11更新：
在index.js中添加语句：
require('html-loader!./file.html')
这样，在html中的style内联样式中添加更改样式表，也可以实时更新了
------------------
最近找了本讲解css的书 ------《深入解析css》，看书时，发现了一个问题，随书的源码，全是 html 格式文件，
问题来了：我想要在vscode里更改了html里面的样式后，实时查看效果，怎么办？
（注：用习惯了vue等的脚手架后，对热重载实在是喜欢得不得了）
解决办法：
假如利用现有的vue/react/angular的脚手架，用了下，感觉实在是别扭。
所以，要是能直接在vscode中，直接打开html文件，修改，保存，实时查看样式更改效果，是最理想的了。
参照webpack官网教程指南，学了几遍，尝试着配置搭建了简陋但对我而言比较实用的用于学习css的webpack开发服务器配置：
1, 在命令行使用mkdir生成一个空文件夹 demo
2，cd/sl 进demo，使用npm init -y初始化，不过Npm的速度相当感人，所以后来抵用yarn了：yarn init
3，安装如下插件：
{ "name": "webpack-demo", "version": "1.0.0", "main": "index.js", "scripts": { "start": "webpack serve" }, "license": "MIT", "dependencies": { "css-loader": "^5.0.1", "file-loader": "^6.2.0", "html-loader": "^1.3.2", "html-webpack-plugin": "^4.5.0", "style-loader": "^2.0.0", "webpack": "^5.9.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" } }
4，创建一个名为webpack.config.js的文件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath:'/'
},
devServer:{
hot: true,
open: 'Chrome'
},
module:{
rules:[
{
test:/.css$/i,
use:[
{ loader: 'style-loader'},
{ loader: 'css-loader'},
]
},
{
test:/.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test:/.html$/,
loader: 'html-loader'
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
}
]
},
plugins:[
new HtmlWebpackPlugin({
favicon: './src/favicon.ico',
template: './src/file.html',
})
]
}