美文网首页
实时构建

实时构建

作者: 珍珠林 | 来源:发表于2017-05-11 22:05 被阅读0次

    如果每一次小的改动都要手动执行一遍构建才能看到效果,开发效率会很低下。监听文件改动并实时构建的能力成为新一代打包工具的标配。
    在webpack中,通过添加--watch选项即可开启监视功能,webpack会依据构建得到的依赖关系,对文件进行监听,一旦发生改动则触发重新构建:

    webpack -w
    

    除了watch模式外,webpack还提供了webpack-dev-server来辅助开发与调试。
    webpack-dev-server是一个基于Express框架的Node.js服务器。它还提供了一个客户端运行环境,会被注入到页面代码中执行,并通过Socket.IO与服务端通信。服务端的每次改动都会被通知到页面上,页面可以随之做出反应。除了自动刷新外,还提供有模块热替换(Hot Module Replacement)的强大功能。
    使用webpack-dev-server需要额外安装webpack-dev-server包:

    npm install webpack-dev-server -g
    

    然后启动webpack-dev-server即可:

    webpack-dev-server
    

    默认监听8080端口,因此浏览器直接打开http://localhost:8080即可看到结果页面。

    相关文章

      网友评论

          本文标题:实时构建

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