WebPack使用(四)----开发环境

(1)当项目变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度颜色。

$ webpack --progress --colors

进度条如下:

(2)如果不想每次修改模块后都重新编译,那么可以启动监听模式。

开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,监听模式的整体速度是很快的。

$ webpack --progress --colors --watch

(3)使用webpack-dev-server

开发服务是一个更好的选择,它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并以监听模式自动运行 webpack,在浏览器打开http://localhost:8080/http://localhost:8080/webpack-dev-server/可以浏览项目中的页面和编译后的资源输出,

并且通过一个 socket.io 服务可以实时监听它们的变化并自动刷新页面。

# 安装

$ npm install webpack-dev-server -g


# 运行

$ webpack-dev-server --progress --colors

(4)运行  localhost:8080

更改样式和内容后,页面自动刷新成


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,938评论 31 98
  • 写在前面 第一次接触webpack,是在一个react项目参与中,刚开始使用的时候,甚至不知道是做什么用的,只看到...
    默默先生Alec阅读 690评论 0 3
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,268评论 7 35
  • 2017年6月29日 星期四 天气雨 今天按照计划练腹。热身完之后,开始悬垂腿举。每次这个腿举都感觉得困难但是腹部...
    whatcanhumando阅读 101评论 0 0
  • 庾郎九种愁滋味,江郎黯然憔悴。 只有刘郎,蓬山不远,携手天台姿媚。 寻踪苦累。 问再度刘郎,共谁沉醉? 若负刘郎,...
    陶然忘机阅读 237评论 0 2