webPack
文章平均质量分 72
DreamFive
这个作者很懒,什么都没留下…
展开
-
第八节、图片处理:css中的图片处理
开发过程中我们都曾在图片的坑中无法自拔过(有些人在开发环境中是可以找到图片的,但是一打包后就找不到图片了,有些人是不知道如何正确引入html或者css中的图片,导致程序出错),从这节内容开始以及后面的两节让我们一起来彻底走出webpack图片的坑。图片写入css首先我们找一张图片,找到图片后在src目录下建立一个images文件夹,用来存放图片。在index.html文件中增加一个div标签(需要...原创 2017-11-02 10:06:28 · 909 阅读 · 0 评论 -
第九节、图片处理:css分离与图片路径处理
上一节内容已经学会了如何把小图片打包成Base64格式,也对webpack图片的打包有了基本的了解。这节内容主要学习两个知识:把css从JavaScript代码中分离出来如何处理分离出来的css中的图片路径不对问题css分离:extract-text-webpack-plugin当一个项目很简单,只是简单的页面交互时,js代码可能很少,大部分的代码都在css原创 2017-11-03 09:40:25 · 529 阅读 · 0 评论 -
第7节、插件配置:HTML文件的发布
这节开讲一下如何把html文件打包到我们的生产路径下,相对于我们之前项目的文件路径,,/src是开发环境下的文件夹,,/dist是我们要打包到的文件夹,也就是我们要部署到生产环境中,即真实环境中的文件夹。打包HTML文件针对上节内容出现的问题,我们在这里进行纠正,在实际开发中,webpack配置文件是分开的,开发环境一个文件,生产环境一个文件。我们先把dist中的htm原创 2017-11-01 16:55:05 · 192 阅读 · 0 评论 -
第十三节、给webpack增加babel支持
现在前端开发都开始使用ES6的语法了。当然webpack3增加了一些ES6的转换支持,但是在项目中添加babel-loader配置会方便我们的开发。Babel是什么?babel是一个编译JavaScript的平台,它的强大之处表现值可以帮你达到以下目的:使用下一代的javascript代码(ES6\ES7),即使这些标准目前并未被当前的浏览器完全支持。使用基于j原创 2017-11-10 11:22:46 · 792 阅读 · 0 评论 -
第六节、插件配置:配置js压缩
这节内容我们将初步了解插件(plugins)的用法。压缩js代码:我们编写的js文件,在上线前,都是要进行压缩的,在没有webpack和gulp这些工具前,你可能需要找一个压缩软件或者在线进行压缩。在webpack中可以很轻松的实现js代码压缩,他是通过插件的方式实现的,这里我们引入的插件是uglifyjs-webpack-plugin(js压缩插件,简称uglif原创 2017-11-01 16:11:45 · 578 阅读 · 0 评论 -
第五节、模块:css文件打包
这节课,我们来学习css文件打包,在学习之前,需要对webpack.config.js里的Loaders配置项进行了解。LoadersLoaders是webpack最重要的功能之一,通过使用不同的loader,webpack可以用脚本和工具,对不同的文件格式进行处理。举几个简单的例子:可以把SASS文件 写法转换成css,而不再使用其他转换工具。可以把ES6或者ES7的代码,转换成大多浏览器兼容的...原创 2017-11-01 10:25:52 · 1212 阅读 · 0 评论 -
第四节、配置文件:服务和热更新
作为一个前端工程师,最大的变成需求就是所见即所得的工具,也就是常说的热更新。说一下,大家在学习的时候可以使用淘宝镜像cnpm来安装相关的依赖包,不然网太差会很慢,淘宝镜像网上搜一下就出来了。设置webpack-dev-server要执行webpack-dev-server是要先使用npm install webpack-dev-server --save-de原创 2017-11-01 09:22:50 · 1185 阅读 · 0 评论 -
第三节、配置文件:入口和出口
首先要说明的是:学习这节课前,务必作完上节课的代码,否则你会学的一脸懵逼。上节课通过一个小Demo我们对Webpack有了初步了解,但是上节课的终端打包方案,在实际开发中并不使用,而是使用Webpack的配置文件的方式进行设置。这节课我们就学一下配置文件的大体结构和入口出口文件的配置。配置文件webpack.config.jswebpack.config.js就是webpack的配置文原创 2017-10-31 18:55:37 · 788 阅读 · 0 评论 -
第二节、动手建立一个demo
建立基本项目结构首先进入上节课我们建立的webpack_demo目录(每个人建立的位置不同,可能建立在了D盘或者E盘)。进入后在根目录建立两个文件夹,分别是src文件夹和dist文件夹:src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。你可以理解成原创 2017-10-31 16:53:48 · 692 阅读 · 0 评论 -
第一节、认识webPack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。原创 2017-10-31 16:04:53 · 487 阅读 · 0 评论 -
第十二节、css进阶:消除未使用的css
相信有很多人都用过Bootstrap这个框架,我们在使用的时候每个页面只使用了其中一小部分的css样式,对着项目的推进,css代码会越来越多,有些是你自己写的,有的是你直接使用框架定义好的,到后期进行需求更改的时候我们可能就无暇关注css样式,造成很多css的冗余。这节内容就来学士使用webpack来消除未使用的css。purifycss安装purifycss-webp原创 2017-11-08 15:51:12 · 3659 阅读 · 1 评论 -
第十一节、css的进阶:自动处理css3属性前缀
针对css3的一些属性,有些在使用的时候我们要加入前缀,但是有些又不用,这个有点麻烦,这节内容会讲到如何通过postcss-loader给css3属性自动添加前缀。属性前缀相信大家都应该看到过,例如-webkit-transform: rotate(45deg); transform: rotate(45deg);为了兼容浏览器,我们不得不加入-webki原创 2017-11-08 15:03:47 · 537 阅读 · 0 评论 -
第十节、图片处理:html中的图片处理
这节的内容,是针对html中引入图片的处理。html-withimg-loader安装:npm install html-withimg-loader --save-dev配置loader:{ test:/\.(html|html)$/i, use:['html-withimg-loader']}然后在终端中可以进行原创 2017-11-03 16:01:54 · 415 阅读 · 0 评论