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

$ webpack --progress --colors

如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。

$ webpack --progress --colors --watch

当然,使用 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
 

webpack 开发环境的更多相关文章

  1. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  2. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  4. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  5. webpack开发环境配置和生产环境配置

    开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...

  6. webpack 开发环境与生成环境的 配置

    写在前面 最近学习react,之前做vue项目的时候,一直都是拿来主义,浑浑噩噩,感觉不太好,趁学习react的机会,在顺带学习一下webpack.一般配置文件分两份,为开发环境和生成环境.有此区分, ...

  7. vue2+webpack 开发环境配置

    前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...

  8. 从0构建webpack开发环境(三) 开发环境以及 webpack-dev-server 的使用

    sourceMap 实际应用开发过程中大部分时间都是处于开发模式中,其中需要频繁的修改代码.调试和打包. 但是打包后的代码多个模块压缩到了一个bundle文件,如果出现警告或者异常很难定位到具体模块和 ...

  9. webpack开发环境和生产环境切换原理

    在package.json中有如下设置: "scripts": {    "dev": "node build/dev-server.js" ...

  10. React+webpack开发环境的搭建

    首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述. 在上一章说过babel是一个javascript编辑器,在react项目中使用bab ...

随机推荐

  1. 每天一个Linux命令(46)ifconfig命令

    在windows系统中,ipconfig命令行工具被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).     ( ...

  2. PHP汉子转拼音

    <?php /** +------------------------------------------------------ * PHP 汉字转拼音 +------------------ ...

  3. Linux基本命令 文件搜索命令

    1.文件搜索命令find ================================================================================== 命令名称 ...

  4. Android 使用OpenCV的三种方式(Android Studio)

    http://blog.csdn.net/sbsujjbcy/article/details/49520791 其实最早接触OpenCV是很久很久之前的事了,大概在2013年的5,6月份,当时还是个菜 ...

  5. java resources 红叉 Cannot change version of project facet Dynamic Web Module to 2.5

    在使用maven导入项目的时候,markers提示Cannot change version of project facet Dynamic Web Module to 2.5,不能将工程转换为2. ...

  6. ubuntu 下使用vi时方向键乱码,退格键不能使用

    ubuntu 下使用vi时方向键乱码,退格键不能使用的解决方法 问题表现:Ubuntu下,初始使用vi,编辑模式下使用方向键的时候,并不会使光标移动,而是在命令行中出现A B C D 之类的字母,并且 ...

  7. Centos6.5使用yum安装软件的时候 Another app is currently holding the yum lock; waiting for it to exit...

    Loaded plugins: fastestmirror, refresh-packagekit, security Existing . Another app is currently hold ...

  8. json数据与Gson工具类的使用

    JS中使用JSON JSON对象 --> JSON字符串:JSON.stringify(对象) JSON字符串 --> JSON对象:JSON.parse(JSON字符串) <scr ...

  9. Node.js的原型继承函数 util.inherits

    转自:http://sentsin.com/web/179.html util.inherits(constructor, superConstructor)是一个实现对象间原型继承 的函数.Java ...

  10. repo 小结

    repo只是google用Python脚本写的调用git的一个脚本,主要是用来下载.管理Android项目的软件仓库. 1. 下载 repo 的地址: http://android.git.kerne ...