- 博客(15)
- 收藏
- 关注
RSS订阅原创 webpack4.0 基础配置3(css)
1. 安装常见css预处理器的loadernpm install css-loader style-loader less less-loader autoprefixer postcss-loader --save-dev注意：1）autoprefixer postcss-loader 为兼容配置2) 配置sacc的话：sass node-sass sass-loader// 配置webpack加载器(loader) module: { // 设置规则和处理方案 默
2021-04-12 22:56:57
277
原创 Webpack4.0 基础配置2
问题：每一次代码更改，重新编译后，都需要手动的去更改HTML也页面导入的JS信息，插件：html-webpack-plugin 帮我们处理的就是对于HTML的编译和导入文件的自动处理。每一次打包的时候都把之前打包的内容清空掉，也就是build下只保留最新打包的文件。是否存在一个插件，可以帮我们创建一个web服务（不再使用 live-server了），服务可以做以下的事：-> 自动监听代码的改变，如果代码改变自动编译。-> 自动帮我们打开浏览器渲染页面。-> 重新编译后自动刷.
2021-04-11 23:01:53
164
原创 Symbol常用总结
Symbolsymbol是一种基本数据类型，常常用Symbol([description])返回一个Symbol类型的值。操作symbol类型值// 只能通过 变量 来获取值。（还有一种，后面说道）let n = Symbol('a');let obj = { name: 'uzi', age: 12, [n]: 1100}console.log( obj[n] )Symbol类似于内建对象类，具有constructor（Symbol.prototype），但不能new。var
2020-09-02 13:37:03
1028
原创 Webpack 基础原理
0. 准备知识Symbol.toStringTagSymbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，通常只有内置的 Object.prototype.toString()方法会去读取这个标签并把它包含在自己的返回值里。说白了，就是希望自己创建的对象能有自己的标签类型[Object Xxxx]。例如，有许多JS对象类型没有toStringTag属性，但还是能通过toString识别特定返回
2020-08-17 00:36:09
329
原创 Webpack4.0 基础描述
1. 认识webpack 是一种自动打包工具。其作用：1）代码的转换：ts —> js ; scss —> css 。2）文件优化：打包和压缩（js,css,图片等文件），提取第三方模块等。3）模块的合并：可以将多个模块合并为一个文件。webpack应用的核心：1）模块转换器：将模块的内容按照需求转换为新的内容，可以加载非js文件。2）扩展插件：webpack构建流程的过程中可以加入新的逻辑来实现你想要的需求。2. 安装cnpm install webpack webpack-
2020-08-11 23:39:26
219
原创 webpack4.0 (JS)
描述webpack对js的配置是去兼容低版本浏览器而生的，可以理解为 将高级语法转为低级语法，包含es6及一些装饰器等。核心方法是 使用 babel-loader 插件 。注意：babel-loader 只不过是 babel 与 webpack 的桥梁，还有两个核心插件 @babel/core 和@babel/preset-env。@babel/preset-env是一个插件集合，里面包含了许多解析es6语法的插件。babel-loader 会默认调用 @babel/core 转化代码，转化的时候会
2020-08-08 13:53:20
156
原创 React.createContext 源码思考
https://github.com/facebook/react/blob/master/packages/react/src/ReactContext.jsexport function createContext<T>( defaultValue: T, calculateChangedBits: ?(a: T, b: T) => number, // 一个方法，用来计算新老context变化（通过 Object.is() 计算新老context的差异）。): Rea.
2020-07-31 22:38:19
417
原创 ReactDOM.render() 源码思考
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMLegacy.jsrender --return–> legacyRenderSubtreeIntoContainerexport function render( element: React$Element<any>, // 要渲染的元素( string / classComponent / Function.
2020-07-29 19:40:56
263
1
原创 React.createElement 源码思考
https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js// ** ReactElement 是 createElement的核心方法。作用是很简单，就是返回一个信息的承载容器，表明渲染节点的信息。const ReactElement = function(type, key, ref, self, source, owner, props) { const element = { /.
2020-07-29 17:19:50
220
原创 React.Component 源码思考
React.Componenthttps://github.com/facebook/react/blob/master/packages/react/src/ReactBaseClasses.js// 初始时自带 四个属性function Component(props, context, updater) { this.props = props; this.context = context; // If a component has string refs, we will
2020-07-29 12:30:07
231
原创 (Day2) React + TypeScript
Context 的使用方法提供了一个传递数据的方法，避免一层层的传递props带来的麻烦。Context = React.createContext（defaultValue);Context.Provider 包裹父组件，用value属性标明你要传递的值。Context.Consumer 包裹需要接受props的子类元素，以匿名函数的形式接受value。// Context使用方法import React from 'react';import ReactDOM from 'react-d
2020-07-24 00:10:28
165
原创 (Day1) React + TypeScript 复习总结
JSXJSX的本质是JS对象：JSX标签对象 ------> 映射到html标签对象中，React就是用这种方式将JSX渲染到html文档中。简单描述一下JSX：jsx就是js于xml的一种结合体，理解为js于xml可以一起使用。它在运行的时候会被babel转译 生成 执行React.createElement(‘h1’,null,‘hello’)返回生成的对象结构（React元素），根据这个结构，最后进行页面的渲染（React.render()）。jsx的属性 / 表达式：在大括号中，放一
2020-07-21 18:00:11
493
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人