美文网首页
webpack 热更新

webpack 热更新

作者: 前白 | 来源:发表于2021-06-29 16:31 被阅读0次

    本节我们学习 webpack 的模块热更新,也可以叫做模块热替换。其目的是为了加快用户的开发速度,提高编程体验,方便开发人员在不刷新页面的情况下,就能修改代码,并且直观地在页面上看到变化。这个功能主要用于开发过程中,对于生产环境没有任何帮助。

    什么是模块热更新

    HMR 全称为 Hot Module Replacement ,中文意思为模块热更新,是 webpack 提供的最有用的功能之一。它允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。热更新中的“热”我们可以理解为这个模块正在运行中,热替换就是将正在运行的模块进行替换。

    热更新主要可以通过以下几种方式来显著加快发速度:

    • 保留在完全重新加载页面时丢失的应用程序的状态。
    • 只更新改变的内容,以节省开发时间。
    • 调整样式更加快速,几乎等同于就在浏览器调试器中更改样式。

    启用热更新

    HMR 的启动其实很简单,需要使用到 webpack-dev-server 插件和 HMR 插件。

    如果要通过 webpack-dev-server 启动 webpack 的开发环境,可以打开 webpack-dev-server 的热更新开关,例如下面是在 webpack.config.js 配置文件中的演示代码:

    module.exports = {
      devServer: {
        hot: true,  // 打开热更新开关
      }
    }
    

    webpack.config.js 中加入 HotModuleReplacementPlugin 插件,因为这个插件是 webpack 自带的,如果可以直接加入:

    module.exports = {
      plugins: [
        webpack.HotModuleReplacementPlugin(),
      ]
    }
    

    热更新Less代码编译

    在实际应用中,我们一般不会直接编写 CSS 代码,而是使用 CSS 预编译器,例如 Less、Sass、Stylus 来将写好的代码编译成 CSS 代码。我们使用 Less 来举例,在 webpack 中如果我们要使用 Less 代码编译成 CSS 代码,在打包时需要用到一个 less-loader 加载器。而要将 Less 代码正确编译成 CSS 代码则还需要用到 style-loadercss-loader

    首先安装这三个加载器:

    npm install style-loader css-loader less-loader --save-dev
    

    然后修改 webpack.config.js 配置文件:

    module:{
            rules:[
                {
                    test:/.less$/,
                    use:['style-loader','css-loader', 'less-loader']
                }
            ]
        },
    

    然后将一个 .less 文件导入到入口文件 index.js 中,例如:

    import "./xkd.less"
    

    最后执行 webpack 命令把 xkd.less 文件进行打包,并成功编译成了 CSS 代码。

    但是这样我们会发现一个问题,每个修改完 Less 时,如果想在网页中看一下效果,就必须重新执行 webpack 打包一下,那么呀如何解决这个问题呢。这时候就可以用到热更新这个功能。使用热更新,每次修改完代码后,不需要执行 webpack 命令,界面会自动更新。

    示例:

    webpack.config.js 配置文件的内容如下所示:

    const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
        entry: {
            entry:'./index.js',
        },
        output: {
            path:__dirname + '/dist',
            filename:'./bundle.js'
        },
        module:{
            rules:[
                {
                    test:/.less$/,
                    use:['style-loader','css-loader', 'less-loader']
                }
            ]
        },
        mode: 'production',
        plugins: [
            new HtmlWebpackPlugin({   //html编译插件
                template: './index.html'
            }),
        ],
        devServer:{
            //配置服务端口号
            port:8090,
            // 打开热更新开关
            hot: true,  
            //设置基本目录结构
            contentBase:path.resolve(__dirname,'dist'),
            //服务器的IP地址,可以使用IP也可以使用localhost
            host:'localhost',
            //服务端压缩是否开启
            compress:true,
        }
    }
    

    package.json 中配置 npm 脚本命令:

    "scripts": {
        "build": "webpack --config webpack.config.js",
        "dev": "webpack-dev-server --mode development"
    }
    

    然后执行 npm run build 会将代码打包,打包后的代码会压缩成一行。执行 npm run dev 命令,会启动一个本地服务,打开 http://localhost:8090/ 网址就可以看到我们的网页。这样当我们修改 Less 代码时,保存后浏览器页面会自动更新。

    相关文章

      网友评论

          本文标题:webpack 热更新

          本文链接:https://www.haomeiwen.com/subject/czlkultx.html