每次修改了代码都需要重新手动打包，这样很麻烦，不符合webpack的初衷，我们查看webpack帮助看看有没有可以自动运行的方法

输入 webpack -help

可以发现有个 --watch方法 它的解释是监听系统文件改变 我们试一试

现在监听进程一直在运行 我们改变 css的背景颜色为yellow 刷新页面 背景是黄色

每次我们引入css 都要添加css-loader 和style-loader 很麻烦 webpack提供了用命令方式

因为watch 还在继续 我们按Ctrl+c终止监听 输入Y 终止

我们的loader css  加载用这个命令

hello.js中修改引入css的方式

写入命令

会发现效果 跟之前的是一样的 可以打包成功

然后我们用 --watch 合并起来

webpack 还有很多的命令 可以看看文档 对了解webpack很有帮助

webpack第一节(4)的更多相关文章

  1. webpack第一节(1)

    跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...

  2. webpack第一节(3)

    模块化加载 上一节进行了一个简单的模块化加载,复杂点 新建一个js文件 名为 world.js 依旧在根目录下 在hello.js中引入world.js 模块化加载,world.js是一个模块 引入的 ...

  3. webpack第一节(2)

    安装webpack在文件夹中 安装完成如图所示 牛刀小试 在webpack-test根目录下新建一个hello.js (不新建在node-modules文件夹下面的目的是,该文件夹是webpack的依 ...

  4. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  5. android内部培训视频_第一节

    声明:本视频为公司内部做android培训时录制的,无任何商业目的.同时鉴于水平有限,可能不符合您的需求,放在这里的目的是提供给公司同事下载,作为培训的一个记录,也作为一个系列教程的自我督促完成的理由 ...

  6. 我的第一节Android课

    我的第一节安卓课程,今天非比寻常的一天,我开始了我程序猿之路的第一节安卓课程,安卓课程只是我的一个兴趣班,我的本专业是java开发,因为喜欢做一个属于自己的一个手机APP,就选多个一样技能,毕竟十八般 ...

  7. 第四章 跨平台图像显示库——SDL 第一节 与SDL第一次亲密接触

    http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章 跨平台图像显示库——SDL 第一节 ...

  8. Centos7 Openstack - (第一节)基本环境配置

    Centos7 install Openstack - (第一节)基本环境配置 我的blog地址:http://www.cnblogs.com/caoguo 根据openstack官方文档配置 官方文 ...

  9. seajs第一节，seajs基本使用

    什么是seajs,它是干什么使用的,可以去网上搜索一下, 官网:http://seajs.org/docs/ 基本使用seajs <!DOCTYPE html> <html> ...

随机推荐

  1. hive中为分区表增加字段需要注意默认不会修改已有分区的字段，导致查询时新增字段为null

    若向hive表添加字段,通常会使用下面这种语句 alter table default.testparquet add columns(c8 string); 但是对于分区表来说, 1. 若新建的分区 ...

  2. git 如何删除远程仓库的错误提交

    前言 最近一个版本发生产环境以后,忘了把分支切回开发分支,直接在release分支上开发新功能提交了....于是就需要去删除远程仓库的错误提交. git命令行实现 1.强制返回上次的版本(~1回退到上 ...

  3. Git项目实战篇

    版本控制器:Git # 达到多人协同开发的目的 安装 """1.下载对应版本:https://git-scm.com/download2.安装git:在选取安装路径的下一 ...

  4. HTTP请求流程基础知识

    HTTP协议解析: HTTP即超文本传输协议,是一种详细规定了浏览器和万维网服务器之间互相通信的规则,它是万维网交换信息的基础,它允许将HTML文档从WEB服务器传输到WEB浏览器. URL(统一资源 ...

  5. php mt_rand()函数 语法

    php mt_rand()函数 语法 mt_rand()函数怎么用? php mt_rand()函数表示从参数范围内得到一个随机数,语法是mt_rand(X,Y),从两个参数范围内得到一个随机数,随机 ...

  6. 超全Altium Designer16 总结--Altium Designer

    原址:http://blog.csdn.net/qq_29350001/article/details/52199356 以前是使用DXP2004来画图的,后来转行.想来已经有一年半的时间没有画过了. ...

  7. NAGIOS（网络监视工具）

    Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机,路由器等网络设备,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知网站运维人员 ...

  8. Navicat for Mysql 连接报错1251[已解决]

    因为mysql是8.0.11的版本,比较新的mysql采用新的保密方式所以旧的修改密码的方式似乎不能用, 新版本改密码方式: use mysql; ALTER USER 'root'@'localho ...

  9. php理解非对称SSL加密解密、验证及签名

    加密方式分为对称加密和非对称加密,对称加密只使用一个秘钥,加密和解密都使用该秘钥:非对称加密则使用一对秘钥,使用公钥加密,私钥解密. 需要通过原生的openssl_public_encrypt加密,o ...

  10. 几乎相同的 deal.jsp 代码（index.jsp不变），在IDEA相同项目运行，结果却不一样，实在想不出来

    目录 主要问题 主要项目 index.jsp: deal.jsp(正确可运行): deal.jsp(错误不可运行): 错误的代码运行图片: 可运行的代码运行图片 主要问题 几乎相同的 deal.jsp ...