文档章节

webpack慕课学习总结(一)

IT浪漫主义
 IT浪漫主义
发布于 2017/05/04 14:58
字数 742
阅读 4
收藏 0
点赞 0
评论 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
博文 1
码字总数 27945
作品 0
南京
ReactJS webpack 报错 [WDS] Disconnected!

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

OriginLeon ⋅ 2016/12/15 ⋅ 0

《慕课革命--互联网如何变革教育》

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

你好我是森林 ⋅ 05/27 ⋅ 0

开始学习webpack,遇到的几点问题

最近要学习打包,之前听过,也看过相关的文章,以为很简单;结果等自己进行的时候才知道其间的不易。 我是在慕课网上看着视频敲代码,发现自己打包成功了,但是bundle.js 不在文件夹里面;试...

迷茫的飞行猪 ⋅ 2017/11/23 ⋅ 0

JFinal+Vue 实现 Java 高并发秒杀示例

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

周宇YuZhou ⋅ 2016/09/07 ⋅ 0

投稿004期 | 我和慕课风花雪月的风流事

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

含笑666 ⋅ 05/30 ⋅ 0

再见 2017,你好 2018

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

王英豪 ⋅ 2017/12/19 ⋅ 0

有奖征文004期|从小白到大牛,进阶路上有话说?

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

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

从小白到程序员的攻略(适合自学编程的网站)

随着信息时代、大数据时代、人工智能的发展,程序员这个行业也被推到了社会的浪尖上。人们对程序员的评价褒贬不一,而且各个程序员的编程水平和能力也参差不齐。程序员这个行业是一个要求自我...

室长 ⋅ 2017/12/24 ⋅ 0

车神大讲堂 | 新手在学习时容易遇到的问题

2016年的时候,在慕课网发表过一篇手记叫做:夜空中最亮的星:慕课网新手学习指南 这篇文章主要讲解了各大语言的区别,以及他们的学习路线。现在来看这篇文章里面有很多内容不足,所以有了这...

秋名山车神 ⋅ 06/01 ⋅ 0

公开课资源-中国-外国

-----------------------外国--------------------------------- https://www.udacity.com/ http://courseguruapp.com/ https://www.coursera.org/ -----------------------中国-----------......

啊莫 ⋅ 2016/07/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 5分钟前 ⋅ 0

482. License Key Formatting - LeetCode

Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符(排除-)就追加一个-。 Java实现...

yysue ⋅ 24分钟前 ⋅ 0

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 48分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 55分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 58分钟前 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 今天 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 今天 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 今天 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部