webpack热更新原理(面试大概率会问)

搭建webpack环境

创建一个项目

mkdir dev-erver && cd dev-server
npm init -y // 快速创建一个项目配置
npm i webpack webpack-dev-server webpack-cli --save-dev
mkdir src // 创建资源目录
mkdir dist // 输出目录
touch webpack.dev.js // 因为是在开发环境需要热更新，所以直接创建dev配置文件

目录结构

webpack版本

这里说明一下，webpack4和webpack5的配置信息或者显示信息可能有点区别

  "devDependencies": {
   
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }

编写配置文件

// webpack.dev.js

'use strict';

const path = require('path');

module.exports = {
   
    entry: './src/index.js', // 入口文件
    output: {
   
        path: path.resolve(__dirname, 'dist'), // 输出到哪个文件夹
        filename: 'output.js' // 输出的文件名
    },
    mode: 'development',<