webpack入坑之旅(四)扬帆起航
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表:
- webpack入坑之旅(一)不是开始的开始
- webpack入坑之旅(二)loader入门
- webpack入坑之旅(三)webpack.config入门
- webpack入坑之旅(四)扬帆起航
- webpack入坑之旅(五)加载vue单文件组件
- webpack入坑之旅(六)配合vue-router实现SPA
加载图片
现在来我们来试试加载图片,首先第一件事情,肯定是安装对应的loader
。它会将样式中引用到的图片转为模块来处理,使用该加载器需要先进行安装:
1
|
npm install url-loader --save-dev
|
当然你也可以在package.json
添加依赖,然后再npm nstall
一样的效果。
现在去我们的项目目录中添加img文件夹,添加两张图片,一张大图jpg,一张小图png。
然后在我们的webpack.config.js
中添加这段:
1
2
3
4
5
|
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" } // 添加到这!并且会按照文件大小, 或者转化为 base64, 或者单独作为文件
//在大小限制后可以加上&name=./[name].[ext],会将我们的文件生成在设定的文件夹下。
]
|
在html中添加:
1
2
3
|
<img src="img/logo.png" alt="">
<div id="qwe"></div>
<div id="asd"></div>
|
在我们的css中添加:
1
2
3
4
5
6
7
|
/*记得写宽高。。*/
#qwe{
background-image: url(img/logo.png);/*3.2k*/
}
#asd{
background-image: url(img/5.jpg);
}
|
继续运行webpack
如果正确的话,打开我们的浏览器,就可以看到我们正确的图片显示。
如果不正确,请运行npm install file-loader -D
,再进行尝试。
现在我们打开浏览器的调试工具,可以看到小于8K的 背景图片 图片已经被转化成了base64的编码,而大于8k的图片则并没有转化(注意它的地址的变化!)。
直接使用img导入的图也并没有进行base64的转化。
热加载
当项目逐渐变大,webpack
的编译时间会变长,可以通过参数让编译的输出内容带有 进度和 颜色 。
1
|
webpack --progress --colors
|
下面还有一些其他常用的命令:
1
2
3
4
5
6
7
|
webpack #最基本的启动webpack命令
webpack -w #提供watch方法,实时进行打包更新
webpack -p #对打包后的文件进行压缩
webpack -d #提供SourceMaps,方便调试
webpack --colors #输出结果带彩色,比如:会用红色显示耗时较长的步骤
webpack --profile #输出性能数据,可以看到每一步的耗时
webpack --display-modules #默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
|
我们已经把webpack的内容了解了一部分了,那么在生产环境中,我不想每一次进行改变,都去命令行中运行我们的webpack
的命令,我们应该怎么样实现改变后自动更新呢?
webpack 为我们提供了一个webpack --watch
,他会启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。
去运行这个命令试试吧!!
在我们改变代码之后,命令行中可以看到直接就自动编译了,但是显然不够智能,还需要我们手动去刷新浏览器,(其实用liveload
hack成自动刷新!)。
我反正不能忍,还要手动刷新浏览器。所以使用webpack-dev-server
会是一个更好的办法!
它将在localhost:8080
启动一个express静态资源web服务器,并且会以监听模式自动运行webpack
,在浏览器打开http://localhost:8080/
或 http://localhost:8080/webpack-dev-server/
可以浏览项目中的页面和编译后的资源输出,并且通过一个socket.io
服务实时监听它们的变化并自动刷新页面。
1
2
3
4
5
|
# 安装
npm install webpack-dev-server -g
# 运行
webpack-dev-server
|
我们来试试使用vue能配合webpack能不能实现自动刷新。(有关vuejs的知识,大家可以可以先自行上官网查看,我在接下来可能也会一步一步的把vue的例子全部敲一遍,再放到github上来让点评)
首先运行npm install vue -save
将vue添加到我们的项目依赖中去。
首先在我们的entry.js
这个入口文件中进行添加:
1
2
3
4
5
6
7
8
|
// import Vue form ("vue") //如果你安装了babel-loader的话,可以直接使用ES6的语法
var Vue =require("vue");
new Vue({
el: "body",
data: {
message: "hello vue.js"
}
});
|
同样在index.html
中添加来响应vue的数据绑定。
运行webpack-dev-server
。去浏览器查看试试效果吧!任意改变message
中的值,可以看到浏览器会自动刷新。并且将改变的值展示在眼前。(有可能只在http://localhost:8080/webpack-dev-server/
才会自动刷新)
这里其实并没有完全对,不够全面,可能只能响应css的改变。将在下一篇继续调整该配置
自动刷新都配好了。下面我们就来试试怎么加载vue的文件,来实现单文件组件!
webpack入坑之旅(四)扬帆起航的更多相关文章
- webpack入坑之旅(六)配合vue-router实现SPA
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(三)webpack.config入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(二)loader入门
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack入坑之旅(一)不是开始的开始
最近学习框架,选择了vue,然后接触到了vue中的单文件组件,官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件,于是就开始了webpack的入坑之旅.因为原来没有用过 ...
- webpack入坑之旅(一)入门安装
学习一个新的东西,首先第一步就是安装,有时候会遇到各种奇葩的问题 至于什么是webpack我这里就不介绍了,请参考官网:https://github.com/webpack/webpack 安装 前提 ...
- webpack入坑之旅
转自: http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/ http://guowenfh.github.io/2016/03/25/v ...
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- Phalcon如何创建多模块并能进行访问 《Phalcon入坑指南系列 四》
本系列目录 一.Phalcon在Windows上安装 <Phalcon入坑指南系列 一> 二.Phalcon入坑必须知道的功能<Phalcon入坑指南系列 二> 三.Phalc ...
随机推荐
- android Unhandled exception type ParseException提示报错
Unhandled exception type ParseException 意思指:你有一个方法会抛出异常,但是你没有捕捉. 依提示添加一下即可解决:
- jmeter 性能测试 JDBC Request (查询数据库获取数据库数据) 的使用
JDBC Request 这个Sampler可以向数据库发送一个jdbc请求(sql语句),并获取返回的数据库数据进行操作.它经常需要和JDBC Connection Configuration配置原 ...
- uva 12745 Wishmaster(2-sat)
12745 Wishmaster view code#include <iostream> #include <cstdio> #include <algorithm&g ...
- php 批量更新某字段内容的部分内容 replace(要替换的字段,'被替换的字符串,'替换成的字符串')
要求: 一个字段值: ------预约---- 要将其中 "预约",改成"预定". 但是我开始写的时候,写成了 update 表名 set smscontent ...
- SecurityError Error 2148 SWF 不能访问本地资源
错误提示: SWF 文件不能被本地访问 不能访问本地 只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源 错误信息: SecurityError: Error #2148: ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- u3d_shader_surface_shader_1
http://docs.unity3d.com/Manual/SL-SurfaceShaders.html 一:surface shader是啥 Writing shaders that intera ...
- 转:设置Eclipse中的tab键为4个空格的完整方法
from: https://my.oschina.net/xunxun10/blog/110074 设置Eclipse中的tab键为4个空格的完整方法 收藏 XunXun10 发表于 4年前 阅读 ...
- bzoj1036 [ZJOI2008]树的统计Count
1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec Memory Limit: 162 MB Submit: 12646 Solved: 5085 [Subm ...
- NOIP提高组2010 关押罪犯
题目描述 S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示 ...