在前端开发中，我们经常需要对 CSS 进行修改和调整，但是每次修改完 CSS 后都需要手动刷新页面来查看效果，这对于开发效率造成了很大的影响。所以使用 Webpack 对 CSS 模块进行模型热替换（HMR）是一个非常重要的技能，可以大大提升我们的开发效率。

什么是 HMR？

HMR，即模块热替换，是 Webpack 提供的一种对模块进行动态更新的机制。在开发过程中可以使用 HMR，无需刷新整个页面即可更新模块的部分内容，从而加快开发效率。

如何使用 Webpack 的 HMR？

Webpack 的 HMR 机制支持 JavaScript，CSS 等模块的热替换。针对 CSS 模块的 HMR，我们需要使用 style-loader 和 css-loader，并且使用 module 模式。

下面是一份示例代码，以展示如何使用 Webpack 的 HMR：

-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
----- ---- - ----------------

----- -------------------- - -----------------------------------

----- ------- - -------------------- --- -------------

-------------- - -
    ------ -
        --------------------------------------------
        -------------------- ------ ------------
    --
    ------- -
        --------- -------------------
        ----- -------------------- --------
    --
    -------- -
        --- ----------------------
            --------- --------------------
        ---
        --- -------------------------------------
    --
    ------- -
        ------ -
            -
                ----- ---------
                ---- -
                    ------- - -------------- - ----------------------------
                    -
                        ------- -------------
                        -------- -
                            -------------- --
                            -------- -----
                        --
                    --
                    ------------------
                --
            --
        --
    --
--

在这个配置文件中，我们使用 webpack-hot-middleware 来启用 HMR。同时，我们也需要在 CSS loader 中开启 modules 模式来启用模块热替换。

总结

使用 Webpack 对 CSS 模块进行模型热替换（HMR）是一个非常重要的技能，可以大大提升我们的开发效率。在配置 Webpack 的 HMR 时，需要注意 CSS loader 中启用 modules 模式。希望本篇文章能对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66546570d3423812e48fe736