用webpack搭建专用于实时重加载html的开发服务器

最近找了本讲解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',
        })
    ]
}

 

原文地址：https://www.cnblogs.com/sx00xs/p/14096060.html