文档章节

webpack慕课学习总结(一)

IT浪漫主义
 IT浪漫主义
发布于 2017/05/04 14:58
字数 742
阅读 5
收藏 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
有奖征文004期|从小白到大牛,进阶路上有话说?

从小白到大牛,是用无数代码堆砌出的血泪史,就问你,想不想一吐为快? 想不想让大家了解你和代码那些风花雪月的故事? 或独自一人用青春和热血挥洒代码的经历? 咳咳,其实就是想让你写写程...

慕课网官方_运营中心
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
今天
2
0
Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
2
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
3
0
大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部