文档章节

webpack慕课学习总结(一)

IT浪漫主义
 IT浪漫主义
发布于 2017/05/04 14:58
字数 742
阅读 4
收藏 0

一. 用命令行工具创建新的文件夹,并使用npm初始化

二.初始化完文件夹后全局安装wabpack 

npm i -g webpack

然后在创建的文件夹下安装webpack,并保存到配置文件中

npm install webpack --save-dev

安装过程图片

安装完后在sublime上打开当前创建的目录,并创建一个hello.js文件

接下来尝试着用webpack打包这个文件,使用命令行工具输入

webpack hello.js hello.bundle.js

打包后命令行会给出相应的信息,

Hash>哈希值,Version>webpack的版本,Time>打包花费的时间

Asset>打包生成的文件,Size>文件的大小,Chunks>打包的分块,Chunk Names>打包的块名称

看到下图表示已经操作成功,图中显示打包的这个模块的编号为0

接下来再写一个文件,然后用hello.js这个文件使用require去引用这个文件

接着在命令行输入以下代码

webpack hello.js hello.bundle.js

接下来试着打包css文件,创建一个style.css文件,同样也在hello.js里去require这个css文件

然后再在命令行输入

webpack hello.js hello.bundle.js

发现报错,如下图

 

上述报错说明需要一个适当的loader去处理这种类型文件,因为webpack天生不支持css文件的直接处理

所以我们需要在命令行中npm安装支持这种类型的loader

npm install css-loader style-loader --save-dev

接下来安装完之后再运行

webpack hello.js hello.bundle.js

 发现还是报错

这是因为css文件引入的前面需要相应的loder,如下图所示

接下来就打包成功了

为了更清晰的展示效果,再建立一个html文件,同时引入hello.bundle.js文件

然后在hello.js里执行hello('hello world!')

接着在命令行运行

webpack hello.js hello.bundle.js

再打开浏览器发现运行好了

接着我们在css文件中加一句代码

body{
  background-color:red;
}

 再运行代码打包

webpack hello.js hello.bundle.js

这时会发现样式的效果没出来,因为要使css生效,还需要借助一个loader,就是style-loader

 

再运行代码打包,就看到样式生效了

webpack hello.js hello.bundle.js

css-loader是使webpack可以处理.css的文件,style-loader文件是通过css-loader处理完的一个文件,把处理完的这个文件新建一个style标签,插入到html里,当我们的html引入了打包后的文件hello.bunlde.js后,这段代码就被执行,css就被插入到head标签里.

 每次引用css文件不一定要指定它的style.loader,可以有更简便的方法

通过命令行输入

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"

这样就打包成功了

ps:每次更新完文件都需要重新命令行打包一次,非常的繁琐,则可以通过下面这条命令实现自动更新,自动打包

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch

 

© 著作权归作者所有

共有 人打赏支持
IT浪漫主义
粉丝 0
博文 10
码字总数 27945
作品 0
南京
ReactJS webpack 报错 [WDS] Disconnected!

  在慕课网学习ReactJS时,由于老师的教程比较早,现有的yeoman的generator-react-webpack框架构建出来之后,发现框架已经移除了grunt,只用了webpack来进行打包,版本是Version: webpack ...

OriginLeon
2016/12/15
289
0
《慕课革命--互联网如何变革教育》

前言 书籍来源于@Dean Huo赠送,我用笔记、思考作为回馈; 全书共五大篇,18章节,约15万字; 本书的笔记采用问答式进行,筛选和总结我的问题,并在书中寻找答案; 笔记全文约1w字,建议阅读...

你好我是森林
05/27
0
0
JFinal+Vue 实现 Java 高并发秒杀示例

项目介绍 最近因为工作需要,学习研究了如何使用前端MVVM框架Vue进行单页面应用的开发。为了练手,将慕课网上的Java高并发秒杀系列教程, 进行了重新实现。 该教程的前端原为基于jquery的多页...

周宇YuZhou
2016/09/07
432
0
投稿004期 | 我和慕课风花雪月的风流事

"在信息时代,客观障碍已不复存在,"他说:"所谓障碍都是主观上的。如果你想动手开发什么全新的技术,你不需要几百万美元的资金,你只需要在冰箱里放满比萨和可乐,再有一台便宜的计算机,和...

含笑666
05/30
0
0
再见 2017,你好 2018

觉得有必要写一份年终总结,审视一下过去,规划一下未来。 敲完上面这句话,发现用到了两个“一下”,有点累赘,重新组织一下语言吧,可就在重新组织的过程中,突然就不想写了,我想做的是总...

王英豪
2017/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 使用 Fail2Ban 来限制登录尝试

什么是 Fail2Ban? 我们需要在我们网站中防止密码的暴利破解。Fail2Ban 是一个 Python 的应用来查看日志文件,使用的是正则表达式,同时还可以与Shorewall (或者 iptables)直接工作来来启用...

honeymose
6分钟前
0
0
日期和时间API - 读《Java 8实战》

日期与时间 LocalDate 创建一个LocalDate对象并读取其值 // 根据年月日创建日期LocalDate date1 = LocalDate.of(2014, 3, 18);// 读取System.out.println(date1.getYear()); // 2014Sys...

yysue
6分钟前
0
0
8月15日任务

8月15日任务 Memcached命令行 • telnet 127.0.0.1 11211 • set key2 0 30 2 ab STORED get key2 VALUE key2 0 2 ab END 实例: [root@localhost 02]# telnet 127.0.0.1 11211-bash: te......

寰宇01
19分钟前
0
0
LNMP架构(Nginx访问日志、Nginx日志切割、静态文件不记录日志和过期时间)

Nginx访问日志 1.打开配置文件,搜索log_format vim /usr/local/nginx/conf/nginx.conf 2.访问日志常用变量含义 $remote_addr : 客户端IP(公网IP) $http_x_forwarded_for : 代理服务器的IP ...

蛋黄_Yolks
19分钟前
0
0
lombok 不用再写pojo的getset

java实体类不写get/set方法 1、下载地址https://projectlombok.org/download Myeclipse、eclipse安装lombok Lombok是一种Java实用工具,可以帮助开发人员消除Java的冗长,具体看lombok的官网...

木之下
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部