webpack开发服务器

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。 作用：代码发生变化，只重新打包变化的代码，自动更新到页面，存放到内存中，自动刷新浏览器。

步骤：

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

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

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

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

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

   mode中：

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

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

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

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

   yarn serve

4. 完整版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文件夹, 文件名格式如左
                 }
             },
 ​
 ​
 ​
         ]
     }
 }