随笔分类 - 27-前端
摘要：安装插件： yarn add webpack-merge-and-include-globally -D webpack.config.js const path = require("path"); const MergeIntoSingleFilePlugin = require('webpac
阅读全文
摘要：处理 js 资源 有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？ 原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。 其次开发中，团队对代码
阅读全文
摘要：生产模式介绍 生产模式是开发完成代码后，我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化，让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 生产模式准备 我们分别准备两个配置文件来放不同的配置 1. 文件目录 ├── webpack-test (项目根
阅读全文
摘要：处理 Html 资源 1. 下载包 npm i html-webpack-plugin -D 2. 配置 webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-p
阅读全文
摘要：处理字体图标资源 1. 下载字体图标文件 打开阿里巴巴矢量图标库 选择想要的图标添加到购物车，统一下载到本地 2. 添加字体图标资源 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/ico
阅读全文
摘要：修改输出资源的名称和路径 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename:
阅读全文
摘要：处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require(
阅读全文
摘要：处理样式资源 本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 我们找 Loader 都应该去官方文档中找到对应的 Loader
阅读全文
摘要：介绍 模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。 模块化的好处 防止命名冲突 代码复用 高维护性 ES6 之前的模块化规范有 CommonJS => NodeJS、Browserify AMD => requireJS CMD => seaJS ES6 模块化语法 模块
阅读全文
摘要：class 类 ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编
阅读全文
摘要：简化对象写法 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁 //这样的书写更加简洁 let name = '尚硅谷'; let change = function(){ console.log('我们可以改变你!!'); } const school = {
阅读全文
摘要：变量声明 let 关键字用来声明变量，使用 let 声明的变量有几个特点： 不允许重复声明 块儿级作用域 不存在变量提升 不影响作用域链 //声明变量 let a; let b,c,d; let e = 100; let f = 521, g = 'iloveyou', h = []; //1. 变
阅读全文
摘要：Webpack介绍 Webpack 是一个静态资源打包工具。 为什么需要打包工具 开发时，我们会使用框架（React、Vue）、ES6模块化语法，Less/Sass等css预处理器等语法进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、CSS语法才能运行。 所以我们需要打包工具
阅读全文
摘要：操作流程 1. 安装Nodejs 2. 配置npm镜像源、缓存目录 3. 安装vue cli脚手架（可能不需要） 4. 创建vue项目 参考vue官网 5. 运行项目 参考vue官网 如果提示Cannot find package,运行npm install命令安装项目依赖包 其他命令 卸载脚手架
阅读全文
摘要：npm（Node Package Manager） npm 是nodejs的包管理工具，主要功能就是安装、卸载、更新、查看、搜索、发布node的包。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。 node包的安装分两种：本地安装、全局安装。 n
阅读全文
摘要：如果直接使用如下方式扩展系统函数，常常会导致冲突，有可能和系统函数重名或第三方引用的js也扩展了此函数 Array.prototype.first=function(){}; 安全扩展系统函数： var ArrayEx = (function(){ function ArrayEx(array){
阅读全文
摘要：自己写了一个缓存代理，使用代理模式，支持指定函数、支持按参数缓存，原创 后续会支持缓存异步数据 CacheProxy： function CacheProxy(obj,proxyMethods){ var _cache={}; var _getType=Object.prototype.toStri
阅读全文
摘要：ajax二次封装 var _ajax = function (opt) { var defaultOption = { type: "POST", data: { "key": _const.TOKEN }, dataType: 'JSON', cache: false, error: functi
阅读全文
摘要：js中只有函数有作用域，所以用函数模拟一个命名空间 function CartNamespace(){ function LoginBox(){/*登录弹窗*/ this.show=function(){}; } function ShopCartBusiness(){/*购物车业务*/ var _
阅读全文
摘要：公共的发布订阅组件，不需要再在组件中写发布订阅相关逻辑，用于模块间解耦，支持排序、传参，原创~ EventContainer：发布-订阅公共组件 Array.prototype.sort = function (fn) {//数组排序 var temp; fn = fn || function (a
阅读全文
浙公网安备 33010602011771号