剑仙6

2020年3月8日

摘要：（1）图片处理首先回顾下图片引入方式 1、js创建图片引入 2、css结合背景图background-image: url('')引入 3、图片标签引入<img src="" alt="" /> 1、首先在js里创建图片插入接着进行打包输出，测试如下发现图片并没有被打包过来... ...，接下阅读全文

posted @ 2020-03-08 11:54 剑仙6 阅读(806) 评论(0) 推荐(0)

浅谈Image对象--new image

摘要：先来个简单案例： <button id="btn">点击</button> <script type="text/javascript"> var btn = document.querySelector('#btn') btn.addEventListener('click',function() 阅读全文

posted @ 2020-03-08 10:35 剑仙6 阅读(1926) 评论(0) 推荐(0)

2020年3月7日

webpack4+（ES6语法转化、处理JS语法及校验、全局变量引入）

摘要：（1）ES6语法解析转换ES5 为了方便测试，我们先将mode模式改为开发模式development，首先编写ES6语法进行相关测试然后打包测试，发现打包后的js文件仍旧是ES6语法接下来安装相关依赖 npm i babel-loader @babel/core @babel/preset-en 阅读全文

posted @ 2020-03-07 18:50 剑仙6 阅读(1295) 评论(0) 推荐(0)

2020年3月4日

webpack4+（打包后的文件分析+脚本打包+HTML插件+样式处理CSS+Less+css抽离压缩）

摘要：（1）打包后的文件分析首先将打包后的文件进行适当删减，Ctrl+Shift+L可以同时选中所有相同结构内容结构如下 (function(modules){ ... })( { ... } ) 分析可知本质为匿名函数即IIFE函数，执行时会传入后面函数执行符里的对象，接下来分析下传入对象对象构成阅读全文

posted @ 2020-03-04 22:14 剑仙6 阅读(1146) 评论(0) 推荐(0)

webpack测试打包文件的两种方式

摘要： Commonjs模块化打包接下来进行打包验证 npx webpack，输出结果部分如下然后执行测试下打包输出文件main.js，这里测试有两者方法（1）直接使用node环境测试 node main.js （2）新建html文件，引入js脚本然后启动验证接下来执行live-server启动，然阅读全文

posted @ 2020-03-04 18:19 剑仙6 阅读(293) 评论(0) 推荐(0)

浅谈npx&&npx和npm之间的关系

摘要：（1）版本注意 npm 5.2.0开始npm便开始携带了npx （2）npx是什么？ npx是一个工具，它是npm v5.2.0引入的一条命令（npx），是npm的一个包执行器，只要为了提高从npm注册表使用软件包的体验。 npm使得它非常容易地安装和管理托管在注册表上的依赖项， npx使得使用C 阅读全文

posted @ 2020-03-04 17:57 剑仙6 阅读(1495) 评论(0) 推荐(0)

webpack4+（简介+基础配置+配置文件名）

摘要：（1）简介可以做的事情 1、代码转换：将ES6转为ES5；将CSS、Less、Sass等转化为CSS； 2、文件优化：文件打包过程里压缩代码体积，合并文件 3、代码分割：公共模块的抽离、路由懒加载 4、模块合并：按照功能分类，将多个模块合并为一个模块 5、自动刷新：启动webpack服务，实现代码阅读全文

posted @ 2020-03-04 16:29 剑仙6 阅读(587) 评论(0) 推荐(0)

2020年3月3日

安装webpack-cli与webpack版本问题

摘要：最近在学习webpack过程中，根据官方文档推荐局部安装webpack，执行webpack -h命令出现以下提示 npm install webpack-cli -D提示在开发环境中局部安装webpack-cli成功安装webpack-cli后，运行webpack -h还是提示说明webpack命阅读全文

posted @ 2020-03-03 11:19 剑仙6 阅读(10014) 评论(1) 推荐(2)

2020年3月2日

Webpack 3.0 前端工程化（编译ES6/ES7、编译TypeScript、打包提取公共代码、代码分割和懒加载）

摘要：（1）编译ES6 测试后有问题，先继续往下使用webpack配合babel打包编译ES6/ES7 1、Babel是应用比较广泛的编译工具 2、在webpack使用时需要借助babel-loader，之前提到过，在webpack中编译处理静态文件，都会用到loader。而babel-loader是一阅读全文

posted @ 2020-03-02 21:31 剑仙6 阅读(491) 评论(0) 推荐(0)

Webpack 3.0 前端工程化（背景、模块化、环境准备）

摘要：（1）背景作者受Google工具的模块分割影响有了创作灵感随着SPA的推广，前端应用复杂度快速提升。 MVC时代便有了模块化的初期思想三大框架便将模块化概念推广普及开来。而模块化的同时必须面对打包和相关新型语法转换的问题上述可以看出HTML、CSS发展史，预处理语言Less、Sass等，阅读全文

posted @ 2020-03-02 20:40 剑仙6 阅读(194) 评论(0) 推荐(0)

公告