关于配置webpack-dev-server(热更新)

过程

1.先编写devServer配置

// webpack.config

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: { 
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer:{  // 开发服务配置
        port:3000,
        progress:true,  // 是否显示加载进度条
        contentBase:'./dist'
    }
};

2.然后安装如下包

npm install --save-dev webpack

3.运行npx webpack-dev-server 就出现了地址端口 ，或者配置如下json文件

注：devvv的那条命令

// package.json

"scripts": {    // 自己配置脚本shell命令
    "test001":"webpack --config webpack.config.js",    // 相当于在cmd下执行 npx webpack
    "devvv":"webpack-dev-server"   // 设置完后只要不修改配置文件，都是热更新的
},

4.这时去访问游览器还会报错这时需要安装 HTML支持文件的包

npm i html-webpack-plugin

5.然后修改package.json配置文件

添加如下部分，代码都有注释

const HTMLPlugin = require('html-webpack-plugin');

plugins: [ // 附加插件
    new HTMLPlugin({
        template:'./src/index.html', // 模板文件
        filename:'index.html'  // 打包出来的文件名
    })
]

6.然后在游览器继续访问，项目成功跑起

汇总

总共需要安装的包

npm install --save-dev webpack
npm i html-webpack-plugin
npm i html-webpack-plugin

总的配置文件

const path = require('path');
console.log(path.resolve(__dirname, 'dist')) // e:\big ---project\Webpack project\test01\dist

const HTMLPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development", //模式：  "production" | "development" | "none"
    entry: './src/index.js', //入口
    output: { // 输出
        filename: 'main.js', // 打包后的文件名字
        //filename: 'main.[hash].js', // 打包后的文件名字变成带有哈希值
        //filename: 'main.[hash:8].js', // 文件的哈希值只显示8位
        path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径,  --dirname：是使用当前目录出生成一个dist文件夹
    },
    devServer: { // 开发服务配置
        port: 3000,
        progress: true, // 是否显示加载进度条
        contentBase: './dist', // 映射地址
        compress:true  // 是否压缩
    },
    plugins: [ // 附加插件
        new HTMLPlugin({
            template:'./src/index.html', // 模板文件
            filename:'index.html',  // 打包出来的文件名
            minify:{
                removeAttributeQuotes:true, // 删除html页面的双引号
                collapseWhitespace:true,  // 将html页面压缩成一行
            },
            hash:true  // 将文件打包成哈希包
        })
    ]
};