webpack5 模块热替换 案例

目录

HMR 模块热替换

文件目录树：

第一步骤：使用liunx 命令  创建要准备好的文件以及 初始化包文件 和 webpack的配置文件

第二步：准备好需要的 插件 以及 包

第三步：修改 package.json 包配置   删除main属性  添加 private私有属性

第四步：配置 webpack.config.js 文件

第五步：配置 dev-server.js 文件

第六步：编写 index.js 定义入口文件

第七步：配置好 print.js 的函数方法

第八步：配置好 style.css 中的样式

第九步：在 package.json 中定义启动的命令

---

HMR 模块热替换

应用场景：开发环境中，实现代码更新浏览器页面同步更新。

注意：不推荐使用再生产环境中

需要准备的包：webpack5  webpack-dev-server4  webpack-cli4

本案例中使用了css，所以需要准备 预解析 css style 的插件 css-loader  style-loader

node 的内置 API 有 path 

前提： 自己下好 node 与 npm 本次教程不讲解 装node 与 下载npm 以及 切换npm 镜像源

文件目录树：

|- dist文件夹        *创建一个空的就可以了，开发环境暂时没用到

|- src文件夹

|        |- index.js

|        |- print.js

|        |- style.css

|

|- webpack.config.js

|- package.json

|- dev-server.js

第一步骤：使用liunx 命令  创建要准备好的文件以及 初始化包文件 和 webpack的配置文件

创建devServer项目文件夹 mkdir devServer

进入项目文件 cd devServer

初始化包文件 npm init -y  自动会创建一个 package.json的文件

创建src文件夹 mkdir src

创建webpack.config.js 文件  由于我是window系统的并且也没有使用git 所以只能使用window的命令创建 type nul>webpack.config.js    后期都是使用liunx命令的 所以建议是：touch webpack.config.js

 

创建 dev-server.js 文件  type nul>dev-server.js

 然后进入src文件夹目录下 cd src

创建 index.js 文件 type nul>index.js

创建 print.js 文件 type nul>print.js

创建 style.css 文件 type nul>style.css

好了，到此整体目录树就已经完成了

第二步：准备好需要的 插件 以及 包

下载 webpack v5版本 与 webpack-cli V4

# 这里的-D  等价 --save-dev         i 等价 install

# 因为目前 webpack 最新就是v5版所以我就不指定版本了

# 之所以带 -D 是因为这些都是开发环境中才使用到的，生产环境中不需要使用

npm i -D  webpack webpack-cli

下载 webpack-dev-server  V4版

# 目前webpack-dev-server 最新版就是 v4

npm i -D webpack-dev-server

下载 css预解析插件  css-loader   style-loader

 npm i -D css-loader style-loader

 

第三步：修改 package.json 包配置   删除main属性  添加 private私有属性

package.json 修改后的代码

# 这是一个 json 文件

{
  "name": "devServer",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {}
}

第四步：配置 webpack.config.js 文件

const path = require('path')
const webpack = require('webpack')

module.exports = {
    // 入口文件
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    devtool: 'inline-source-map',
    // 预解析
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    // 插件
    plugins: [
        new webpack.ids.NamedModuleIdsPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // 出口文件
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    }
}

第五步：配置 dev-server.js 文件

const webpackDevServer = require('webpack-dev-server')
const webpack = require('webpack')

const config = require('./webpack.config.js')
// 这个是 webpack.config.js 中的 devServer 字段的配置
const options = {
    host: "127.0.0.1",
    port: 9000,
    static: './dist',
    hot: true,
    // 如果想要启动时，自动打开浏览器 就需要配置 open属性
    open: true
}

// addDevServerEntrypoints() 在v4版本废弃
// webpackDevServer.addDevServerEntrypoints()

const compile = webpack(config)

// v4 改版把 解析webpack.config.js 也就是compiler  放在最后的参数
const devServer = new webpackDevServer(options, compile)


// 此方法依然可以用，但由于是同步的，官方不再推荐
// devServer.listen(options.port, options.host, () => {
//     console.log('dev server listening on port 5000')
//     console.log(devServer.start)
// })

// 官方推荐可用，但试了很多遍，不知道问题是出在哪，就是跑不起来
// (async () => {
//     await devServer.start();

//     console.log("dev server is running");
//   })();


// 这个也是一个异步的 启动
devServer.startCallback( () => {
    console.log("dev server is running")
} )

第六步：编写 index.js 定义入口文件

import printMe from './print.js'
import './style.css'

function component() {
    let element = document.createElement('div')
    let btn = document.createElement('button')

    element.innerHTML = ['Hello','webpack'].join(' ')
    element.classList.add('hello')

    btn.innerHTML = 'Click me and check the console'
    btn.onclick = printMe

    element.appendChild(btn)

    return element
}

// 当 print.js 改变导致页面重新渲染时，重新获取渲染的元素
let element = component()
document.body.appendChild(element)

if(module.hot) {
    module.hot.accept('./print.js', function(){
        console.log('Accepting the updated printMe module!')

        document.body.removeClild(element)
        // 重新渲染页面后，component 更新 click 事件处理
        element = component()
        document.body.appendChild(element)
    })
}

第七步：配置好 print.js 的函数方法

export default function printMe() {
    console.log('Updating print.js...')
}

第八步：配置好 style.css 中的样式

.hello {
    color: red;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

第九步：在 package.json 中定义启动的命令

# 在 scripts 字段中 配置启动命令
{
  "name": "devServer",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "node dev-server.js --hot --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {}
}

准备这些以后，直接可以在 cmd 终端中  输入命令：npm run server

就可以自动启动了，并且会自动打开浏览器，并进入当前开发的网址