vv_bug

css-loader 我真记住你了！问题描述准备自己搭一套前端框架，一路都很顺，当遇到 css-loader@6.2.0 去加载样式文件的时候，打包出来之后出现了一些莫名巧妙的文件（我是准备去修改 element-ui 库的主题样式的）。入口文件 (element-variables.scss)：/* 改变主题色变量 */$--color-primary: #409EFF;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-

简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到性能优化、Portals、Render Props 等概念的分析，跟上节奏，我们一起出发吧！知识点性能优化PortalsRender Props类型检查准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行以下命令 clone 一份代码：g

简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到 Refs 转发、Fragments、高阶组件等概念的分析，比前面章节的难度还是略微大一些的，所以一定要跟上节奏哦，我们一起出发吧！知识点Refs 转发Fragments高阶组件深入 JSX准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执

最近在重学 React，很多小伙伴发出 “学完 Vue 还需要学 React？” 这样的疑问，下面我们就来探讨一下这个问题。首先不管是 React 还是 Vue，当然，还有 Angular 等其它的前端框架，它们都是很优秀的前端框架，目的就是为了让你能够高效、快速地开发一个前端项目，贴一张截止目前为止 React 跟 Vue 在 GitHub 上的 star 排行：可以看到，光从 star 人数来讲，Vue 还是领先于 React 的，当然，我们也不能只看 star 人数，就说 React 不如 Vu

简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到异步组件、全局上下文对象、错误边界组件等概念的分析，比前面章节的难度还是略微大一些的，所以一定要跟上节奏哦，我们一起出发吧！知识点代码分割异步组件全局上下文对象 Context错误边界组件准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行

简介上一节我们完成了从 0 开始搭建一个企业级 React 项目的全部内容，项目是有了，但是我们一直都没有近距离接触过 React，所以接下来我们就快速撸一遍 React 官方文档内容，弄清楚一些概念性的东西，为后面的源码分析章节做铺垫。知识点项目搭建核心概念高级指引API 指引hook 指引后面这几节都比较轻松，因为我们基本上把 React 官网：https://reactjs.org/ 的内容跑一遍。让我们开始吧！项目搭建我们直接 clone 一个前面我们搭建的基础项目，然后取

简介上一节我们从 0 开始搭建了一个项目，完成了入口与出口的配置、ts 语法支持、react 基本库的安装、css 样式配置等工作，我们继续上一节的内容。知识点Eslint（代码质量校验）eslint-webpack-plugin（Eslint webpack 插件）eslint-config-react-app（React 官方 eslint 配置）fork-ts-checker-webpack-plugin（ts 语法校验插件）Optimization（分包优化等）准备上一节所有的

简介上一节我们介绍了 React 官方提供的脚手架（create-react-app），然后用官方脚手架创建了一个 react-demo1 项目，用脚手架创建出来的项目算是 React 官方认为的最佳项目实践了，但是从上一节使用中我们可以看出，官方脚手架可还是有一些弊端，它只提供一些可改的 webpack 配置，如果你想自己添加一个 loader、plugin 什么的，你可能就需自定义 webpack 配置了，就不能在依赖脚手架了，既然是重新学习 React，我们就来挑战一下自己，从 0 开始搭建一个企业

简介继续我们的 React 的学习，上一节我们介绍了什么是 JSX 语法，并且从 Babel 源码角度分析了 JSX 语法的转换过程，最后我们还用 CDN 的形式搭建了一个简单的 React 项目，这一节我们研究一下 React 官方提供的脚手架create-react-app。知识点React 官方脚手架（create-react-app）react-scriptsreact 项目中的 webpack 配置start 命令build 命令安装 React小伙伴可以先看一下官网的描述：

简介因为目前公司的技术栈都是 Vue，之前有在 React-Native 的项目中接触过 React，但并没有深入的去了解过， 从现在开始，我就把自己当成一个 React 小白了，决定挑战一下自己，从 0 开始入手 React，中间会不断的跟 Vue 进行对比，跟紧节奏，我们一起出发吧。知识点React 简介JSX 简介Babel 语法转换@babel/preset-react@vue/babel-preset-jsxHello ReactReact 是什么？我就不解释什么是 Rea

一文彻底弄懂 “CommonJs” 与 “EsModule” 区别简介文章中就不具体解释什么是 “CommonJs” 与 “EsModule” 了，我们先简单的描述一下 “CommonJs” 与 “EsModule” 的区别。它们有三个重大差异。CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的

抢先了解前沿技术栈，掌握前端必须框架 Vue 3，本课程将带你从源码的角度一探究竟。全程干货满满，让你在掌握 Vue 3 源码后具有实战开发能力，轻松搞定开发任务与面试。从官方宣布 Vue3 开发就开始关注，一直到 2020 年 9 月 18 日正式版发布才去深入了解它，这一次的版本简直就是 “颠覆” 来形容，总结下来就是：“更快”、“类型更友好”、“更小”、“更好的警告信息”、“更好的 API 特性”，官方还称在 2020 年底之前对所有文档链接、分支和资源包标签的默认值转换为 3，当然， Vue 2

前言最近经常有小伙伴问我一些关于 Vue3.0 的问题，有些甚至恐慌 Vue3.0 发布后自己不会咋办？会不会以后就要失业了呢？当一些新技术的出现，总有些人会对自己不自信，当然，你问我怕不怕？说实话，我是一点都不慌的，别人写出来的东西你去用你还怕啥？无非就是你自己在怀疑你自己能力罢了，年轻人怕啥？干就完了！不过既然有小伙伴问到了 Vue3.0，我还是花了点时间去研究了一下，下面就聊一下当我遇到新技术的时候我是怎么做的。准备工作首先我简单的浏览了一下 Vue3.0 的 官网，然后重点浏览了一下跟 Vue

最近项目中有小伙伴找到我，问我“为啥他写的页面第一次进去可以触发 onCreate 函数，第二次再进的时候就不触发了呢？”（因为我们项目是一个大型的项目，每个开发可能只接触到自己开发的一小部分），然后我就说你可以试着在 activated 钩子函数中做处理，然后他又接着问我“activated 钩子函数又是怎么调用的呢？”，ok！这小子是问上瘾了，我们下面就来详细解析一下。keep-alive<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra

简介JavaScript 作为一种弱类型的语言，类型推断只能提供很有限的支持，TypeScript 提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以验证你的代码可以正常工作，在一些大型的项目中，使用 TypeScript 非常必要，从代码层次就已经避免了很多错误，而且方便文档的书写，最主要的就是后期迭代特别爽，但是对于没有接触过强类型语言（Java、C）的童鞋来说，TypeScript 上手还是有点困难了，单就目前前端发展趋势来说，TypeScript 还是很重要的，想了解更多 TypeScr

问题描述今天有童鞋在用 vue 项目写代码的时候，问我为啥会出现以下报错？[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>

一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别简介用过 vue-cli 脚手架搭建 vue 项目都知道，vue-cli 中内置了 vue-style-loader 去加载样式模块，最后通过 <style> 标签把样式加载到页面，但是 style-loader 同样可以达到同样的效果，那么 vue 官方为啥还封装一个 vue-style-loader 库呢？那么它们到底有啥区别？平时项目中又该如何选择呢？下面先看一下它们各自官网的简介。开始

Webpack 是实现前端工程化的一个重要工具。本课程由浅及深，逐步掌握基础知识并具有实战开发能力。幽默风趣的课堂氛围，带给你的都是最前沿的前端技术，进阶前端开发。你将学到的webpack 简介webpack 基础用法webpack 流程图webpack 源码解析webpack 扩展插件企业级项目实战课程介绍webpack 是实现前端工程化的一个重要工具，一些公司甚至会设置一个叫 webpack 工程师的角色，可见 webpack 在前端开发中起到了一个很重要的作用。本次课程将包

前言前面我们写过几篇关于webpack的文章：webpack源码解析一…webpack源码解析七（optimization）然后结合之前babel、eslint知识搭了一个比较复杂的vue项目：webpack实战之（手把手教你从0开始搭建一个vue项目）手把手教你从0开始搭建一个vue项目（完结）在实战demo中我们有用到一个css的插件mini-css-extract-plugin,今天我们结合demo来分析一下源码。简介This plugin extracts CSS in

先上一张流程图，小伙伴可以跟着这个流程图结合代码往下走：图片来源于：细说webpack之流程篇开始git clone https://github.com/webpack/webpack.gityarnyarn setup打包node ./bin/webpack.jsbin/webpack.js//判断有没有安装webpack-cli，没有话的就提示是否需要安装con...

前言前面我们分析了webpack，最后还实战了一个vue的项目：webpack实战之（手把手教你从0开始搭建一个vue项目）手把手教你从0开始搭建一个vue项目(完结）强烈推荐大家去阅读一下前面的文章哈！今天我们带来点干货，我们利用前面的知识撸一个h5移动端适配的框架，我们取名为"fpx-css-loader"。说到h5移动端适配的，大家都会想到rem跟vw，我们去caniuse看一下这两个方案的兼容性：rem可以看到，绝大多数的浏览器是兼容的，平时项目用它完全是没毛病！vwvm

前言前面写过两篇webpack实战的文章：webpack实战之（手把手教你从0开始搭建一个vue项目）手把手教你从0开始搭建一个vue项目（完结）强烈建议小伙伴们去看一下前面几个章节的内容，这一节我们研究一下vue-loader。介绍Vue Loader 是什么？Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：<template> <div class="example">

前言上一节webpack实战之（手把手教你从0开始搭建一个vue项目）最后我们完成了css样式的配置：webpack.config.js：const path = require("path");const config = new (require("webpack-chain"))();const isDev = process.env.WEBPACK_DEV_SERVER;config .context(path.resolve(__dirname, ".")) //webpack

前言我们前面从前端架构：前端框架系列之（装饰器Decorator）前端框架系列之（vue-class-component）前端框架系列之(vue-property-decorator)前端框架系列之（mvc）前端框架系列之（mvp）前端框架系列之（mvvm）到项目工程化工具eslint、babel、webpack等，分别结合demo跟源码做了具体的分析：前端框架系列之（eslint源码解析）前端框架系列之（eslint自定义插件）babe从入门到精通…webpack源码解析七

前言前面我们写了几篇文章用来介绍webpack源码，跟着官网结合demo把整个webpack配置撸了一遍：webpack源码解析一webpack源码解析二（html-webpack-plugin插件）webpack源码解析三webpack源码解析四webpack源码解析五webpack源码解析六（webpack-chain）今天我们结合demo来看一下webpack的Optimization配置。demo还是前面几节中的: https://github.com/913453448/we

前言前面我们写了几篇文章用来介绍webpack源码，跟着官网结合demo把整个webpack配置撸了一遍：webpack源码解析一webpack源码解析二（html-webpack-plugin插件）webpack源码解析三webpack源码解析四webpack源码解析五今天我们说一下一个关于webpack配置的第三方库webpack-chain,为什么要讲它呢？ 可以借助IDE可以做到智能提示，让我们配置起来不容易出错，而且完全链式语法，用起来比较爽！开始我们还是接着我们之前章节的w

前言我们继续前面的内容，把webpack剩下的配置项撸一遍，推荐大家先看一下前面的文章：webpack源码解析一webpack源码解析二（html-webpack-plugin插件）webpack源码解析三webpack源码解析四配置devtool此选项控制是否生成，以及如何生成 source map。什么是Source map？简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置（source map更多的介绍跟

前言我们接着前面的文章webpack源码解析二继续往下探索webpack的配置，demo的github地址：https://github.com/913453448/webpack-demo.git。DevServerwebpack的devServer配置主要是针对webpack/**webpack-dev-server跟webpack/webpack-dev-middleware**的配置，因为webpack-dev-server依赖webpack-dev-middleware。我们首先在我们的因

前言前面写了一篇文章webpack源码解析一梳理了一遍webpack的编译过程，今天我们结合demo来过一遍webpack的所有配置项。开始为了更好的了解每一个选项的用法我们首先clone一份webpack的源码（demo用的是5.0.0-beta.7版本）：git clone https://github.com/webpack/webpack.git源码clone完毕后在当前页面执行setup操作并且安装webpack-cli：yarn setup && yarn add

前言前面我们写了几篇很长的文章去介绍babel源码、preset-env、runtime，babel源码解析一babel源码解析之（@babel/preset-env）babel源码解析之（@babel/plugin-transform-runtime）在babel配置中我们可能用过@babel/polyfill、core-js、core-js-pure、@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3、@babel/pl

前言前面我们用了一篇很长的文章介绍了@babel/preset-env,感兴趣的可以去看我之前的一篇文章babel源码解析之（@babel/preset-env）,今天我们要分析的是babel的一个插件，叫@babel/plugin-transform-runtime.简介我们看一下官网对它的描述：A plugin that enables the re-use of Babel’s injected helper code to save on codesize.很简短的一个描述信息，翻译一

前言还记得之前写过一篇文章:babel源码解析一,里面把babel的整个流程跑了一遍，最后还自定义了一个插件用来转换“尖头函数”，通过前面的源码解析我们知道，preset其实就是一些插件的集合，这一节我们来介绍一个babel中比较重要的preset“@babel/preset-env”，可能有些小伙伴已经用过了，没用过的话至少也应该见过，废话不多说，我们直接盘它。开始我们从项目创建开始，首先我们创建一个叫babel-demo的项目用来测试babel，然后执行npm初始化npm init 然后我们

开始前面已经写了两篇关于eslint的文章了，想必都对eslint应该有一个简单的认识了，在平常的项目中使用应该是问题不大，面试应该也是问题不大的，大家有兴趣可以看看前面两篇文章：前端框架系列之（eslint入门）前端框架系列之（eslint源码解析）接下来我们更深入的了解一下eslint，我们直接结合demo创建一个我们自己的plugin。我们还是用前面我们的eslint-demo项目，代码已经上传github了大家可以直接clone一份,我们在eslint-demo项目根目录直接创建一个p

开始我们直接clone一份eslint的源码git clone https://github.com/eslint/eslint.git为了更好的理解源码，我直接贴一张自己整理的eslint的流程图，我们对照流程图再一步步解析源码bin我们首先找到了eslint命令的入口文件bin/eslint.js：...(async function main() { ... process.exitCode = await require("../lib/cli").execute(

创建工程我们创建一个叫eslint-demo的工程，然后执行npm初始化https://github.com/913453448/eslint-demonpm init安装使用安装eslint$ npm install eslint --save-dev创建配置文件执行eslint的初始化npx eslint --init执行完毕后可以看到一个配置文件，我选的是json格式的配置文件，还有package.json中直接引用、yaml、js格式的配置文件，后面我们会讲到。.esli

前言前面我们写了三篇关于es装饰器的文章了，感兴趣的可以去看看：前端框架系列之（装饰器Decorator）前端框架系列之（vue-class-component)前端框架系列之(vue-property-decorator)简介MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：Model（模型）表示应用程序核心（比如数据库记录列表）。View（视图）显示数据（数据库记录）。Controller（控制器）处理输

简介前面我们介绍过了mvc 前端框架系列之（mvc），mvp 前端框架系列之（mvp）,MVP中我们说过随着业务逻辑的增加，UI的改变多的情况下，会有非常多的跟UI相关的case，这样就会造成View的接口会很庞大。而MVVM就解决了这个问题，通过双向绑定的机制，实现数据和UI内容，只要想改其中一方，另一方都能够及时更新的一种设计理念，这样就省去了很多在View层中写很多case的情况，只需要改变数据就行。Model（模型）表示应用程序核心（比如数据库记录列表）。View（视图）显示数据（数据库记录