当前位置 > it书童 > webpack > 正文
推荐小册
java高效编程
怎样更高效地用 java 编程

juc并发工具库
java并发编程工具库

设计模式
设计模式

jvm调优
jvm调优

rabbitmq实战
rabbitmq实战

redis实战
redis实战

Keepavlied高可用集群
Keepavlied高可用集群

nginx入门到实战
nginx入门到实战

java调试
java调试中遇到的各种坑

java输入输出流
java输入输出流

webpack 热更新 css

webpack it书童 2020-02-08 11:01:48 0赞 0踩 580阅读 0评论

src/index.js

import './style.css'
let btn = document.createElement('button')
btn.innerHTML = '新增'
document.body.appendChild(btn)
btn.onclick = function () {
    let div = document.createElement('div')
    div.innerHTML = 'item'
    document.body.appendChild(div)
}

src/style.css

div:nth-of-type(odd) {
    background: yellowgreen;
}

webpack.config.js

devServer: {
    contentBase: './dist',
    // 编译时自动打开浏览器
    // open: true,
    port: 8080,
    hot: true,
    hotOnly: true
},

终端执行:

$ npm run start

当 src/style.css 样式变化时,页面不会重新刷新,只会重新渲染样式

源码

关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/422/webpack-hot-update-css