[js高手之路]深入浅出webpack系列1-安装与基本打包用法和命令参数

webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧. 第一步.安装webpack 新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-de…

[js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install webpack@3.5.6 --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这个web…

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他的配置选项的探讨. 一.chunks选项这个属性非常有用,可以指定某个页面加载哪些chunk( 如:js文件 ) 我们可以用他做多个页面模板的生成. 比如,我们在实际开发中,做一个博客网站,一般来说有首页,文章列表页,文章详情页等等,这些页面都有一个特点,都要引入一些公共的js文件以及该页面特有的…

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意的添加自定义的数据 webpack.dev.config.js文件: var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : { main : './src/js/main.js', cal…

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢?,我们可以使用插件html-webpack-plugin,首先安装这个插件npm install html-webpack-plugin --save-dev,好的,接下来就开始用这个插件了官方参考文档: 插件通用用法:https://webpack.j…

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 module.exports = { entry : ['./src/js/main.js', './src/js/calc.j…

[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等. 官方参考文档:https://webpack.js.org/loaders/ 我们从本文开始,重新搭建一个项目结构来解释下loader的用法. 一.项目结构搭建准备: 目录结构: demo3 dist src components modal.html modal…

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在webpack使用图片资源,我们需要用file-loader来处理. 安装file-loader: npm install file-loader --save-dev 在src目录下面新建一个文件夹( img ) 存储图片一.demo3目录下面的index.html文件引入图片 <body> &l…

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease 1s; } 一.这是一个css3的过渡样式,我们知道,写css3的时候,需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件安装postcss-loader: npm install postcss-loader --save-dev 安装au…

[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上) [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下) [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上) [js高手之路]深入浅出webpack教程系…

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 cxt.lineTo( x2, y2 ):将画笔从起点开始画直线,一直画到终点坐标( x2, y2 ) cxt.stroke();用画笔连线,moveTo,lineTo并不会产生实际的线条 x1,y1,x2,y2是点的坐标,canvas的坐标原点在canvas的左上角. 画一根直线: <style…

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, 半径 ) cx,cy表示控制点的坐标,x2,y2表示结束点的坐标,如果我们想画一条弧线,需要提供3个坐标,开始点,控制点和结束点. 开始点一般可以通过moveTo或者lineTo提供.arcTo提供控制点和结束点. <style> body { background: #000; } #canva…

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以弧度单位,弧度与角度的换算关系为: 弧度=角度*(π/180°). 以时钟为参考,3点钟方向为0度,6点钟方向…

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理.在游戏中的资源大多数都是加载图片. 一.canvas怎么加载图片? canvas提供3种图片加载的API调用方式. drawImage( image, dx, dy ) drawImage( image, dx, dy, dw, dh…

[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 strokeText用法: cxt.strokeText( text, x, y, [maxwidth] ) text:需要输出的文本内…

[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽度,值是一个数值,如lineWidth = 5. 画3条不同宽度的线条: <style> body { background: #000; } #canvas { background: white; } </style> <script> window.onload =…

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现反色,黑白,亮度,复古,蒙版,透明等美颜效果. getImageData:获取一张图片的像素数据 cxt.getImageData( x, y, width, height ) x:图片所在的x坐标 y: 图片所在的y坐标 width,height 要获取的像素区域返回值是一个对象,对象包括一个d…

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数,这个函数在这篇文章[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)已经有讲到过他的基本用法,我们来两个简单的例子复习一下: <meta charset='utf-8' /> <s…

[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变线形渐变指的是一条直线上发生的渐变. 用法: var linear = cxt.createLinearGradient( x1, y1, x2, y2 ); linear.addColorStop( value1, color1 ); linear.addColorStop( value2, color2 ); ..... oGc.fillStyle = line…

[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持.你可以参考这个网站,查看canvas的支持性:http://www.caniuse.com/#search=canvas,当然他还能查询到css3和html5等很多web新潮技术在各浏览器的支持性. 如何使用canvas? 要使用canvas,一…

[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解

路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. <style> body { background: #000; } #canvas{ background:white; } </style> <script> window.onload = function(){ var oCanvas = document.querySelector( "#canvas" ), o…

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解 [js高手之路] html5 canvas系列教程 - arc…

[js高手之路] html5 canvas教程 - 绘制七巧板

七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script> window.onload = function () { var oCanvas = document.q…

[js高手之路] es6系列教程 - 对象功能扩展详解

第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.name; } }; console.log( User.showName() ); //有了es6之后,这么写 let User = { name : 'ghostwu', showName (){ return this.name; } }; console.log( User.showName()…

[js高手之路]设计模式系列课程-发布者,订阅者重构购物车

发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色中介拿到卖主的房源信息,根据手头上掌握的客户联系信息(买房的人的手机号),通知买房的人,他充当了发布者的角色卖主想卖掉自己的房子,就需要告诉中介,把信息交给中介发布二,网站订阅信息的用户订阅者角色:需要订阅某类信息的网民,如某个网站的javascript类型文章发布者角色:邮箱服务器,根据网站收集到的用户订…

[js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理,由主板,电源,内存条,显卡, 机箱,显示器,外设等组成的把一个成型的产品组成部件,分成一个个独立的部件,这种方式可以做出很多灵活的产品,这就是组合模式的优势比如:家用台式机电脑,要求配置比较低, 这个时候只需要主板+电源+内存条+机箱+显示器+外设就可以了,不需要配置独立显卡鸡腿堡+鸡翅+紫薯…

[js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大.对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的…

[js高手之路] es6系列教程 - 迭代器与生成器详解

什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的值.另一个是done,他是一个布尔值,用来表示该迭代器是否还有数据可以返回. 3,迭代器还会保存一个内部指针指向当前集合中的值设计模式中有个迭代模式,跟迭代器是差不多的,我之前有写过2篇文章关于迭代模式: [js高手之路] 设计模式系列课程 - 迭代器(1) [js高手之路] 设计模式系列课程 -…

[js高手之路] 设计模式系列课程 - jQuery的extend插件机制

这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这个原理. var G = function ( selector, context ) { return new G.fn.init( selector, context ); }; G.fn = G.prototype = { constructor : G, init: function ( s…

【[js高手之路]深入浅出webpack系列1-安装与基本打包用法和命令参数】的更多相关文章