webpack(六)-----webpack-dev-server 的认识

俗称热更新(此版本为webpack5.0以上)
开启服务器devServer:用来自动化自动编译，自动打开浏览器，自动刷新浏览器
特点：只会在内存中编译打包，不会有任何输出

---

属性

contentBase:代表html页面所在的相对目录（项目构建后的路径）
compress:是否启动gzip压缩
port：端口

---

//html-webpack-plugin的安装 通过 npm i html-webpack-plugin@next -D

//引入地址拼接
const { resolve } = require('path')

//解析html的插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //入口
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                //匹配规则
                test: /\.css$/,
                //详细的loader
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片
                test: /\.(jpg|png|gif)$/,
                use:'url-loader?limit=10000&name=img/[hash:8]-[name].[ext]'
            }

        ]
    },
    plugins: [
        // 功能:html-webpack-plugin默认会创建一个空的Html文件，自动引入打包输出的所有资源(js/css)
        // 需求:需要有结构的Html
        new HtmlWebpackPlugin({
            //复制src/index.js文件，并自动引入打包输出的所有资源(js/css)
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        //启动gzip压缩
        compress:true,
        // 端口为3000
        port:3000,
        //自动打开默认浏览器
        open:true
    }
}

---

需通过npm i webpack-dev-server -D安装
运行指令：需通过观察webpack.json中的"webpack": "^5.6.0"的版本确定运行指令
webpck:5以上通过npx webpack serve 运行

最后通过打开网址输入localhost:端口号查看