文档章节

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
南京
私信 提问
师尉嘉 2017-02-23 工作日报

1.完成保洁员排班页面vue重构 2.慕课网vue2.0 购物车视频学习 100% 3.慕课网webpack学习 20%

师尉嘉
2017/02/23
1
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期|从小白到大牛,进阶路上有话说?

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

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

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
33分钟前
2
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
58分钟前
6
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
6
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
5
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部