webpack开发服务器

作用：代码发生变化，只重新打包变化的代码，自动更新到页面，存放到内存中，自动刷新浏览器。

步骤：

1. 下载模块包：yarn add webpack-dev-server -D

2. 自定义webpack开发服务器启动命令serve-在package.json里

   "scripts":{
       "build":"webpack",
       "serve":"webpack serve"
   },
   

3. 在webpack.config.js添加以下配置

   mode:'development',
   module.exports = {
   	//...省略其他 
       devServer:{
           port:3000,//端口号
           open:true//自动唤起浏览器
       }
   }
   

   mode中：

   1. development：开发环境，进行打包时，不会混淆代码，打包速度更快。

   2. production：生产环境，进行打包时，会压缩混淆代码，打包速度较慢。

      混淆：变量名发生改变，空格也去除了，可以节约代码体积，删除所有注释

4. 启动当前工程里的webpack开发服务器

   yarn serve

5. 完整版webpack.config的配置：

const path = require("path") //引入内置模块
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", //默认入口
    output: {
        path: path.join(__dirname, 'dist'), //出口文件夹名
        filename: "bundle.js"
    },
    plugins: [
        new HtmlWebpackPlugin({ //设置html
            //设置html路径
            template: './html/demo.html'
        })
    ],
    //设置服务器端口
    devServer: {
        port: 3000,
        open: true, //自动唤起浏览器
    },
    // 设置开发环境
    mode: 'development',
    module: {
        rules: [{ //设置less
                test: /\.(c|le)ss$/i,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, { //设置图片
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: 'asset',
                // 在导出一个 data URI 和一个单独的文件之间自动选择
                // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
                // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
                generator: {
                    filename: 'img/[name].[hash:6][ext]' // 放到dist/imgt文件夹, 文件名格式如左
                }
            }, { //设置字体
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                type: 'asset/resource',
                // 在导出一个 data URI 和一个单独的文件之间自动选择
                // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
                // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
                generator: {
                    filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
                }
            },



        ]
    }
}