摘要:什么是Tree Shaking webpack实现Tree Shaking usedExports sideEffects Webpack中tree shaking的设置 CSS实现Tree Shaking cnpm install purgecss-webpack-plugin -D 配置Purg
阅读全文
摘要:Terser介绍和安装 命令行使用Terser Compress和Mangle的options Terser在webpack中配置 CSS的压缩 index.js import {sum, mul} from "./math"; import _ from "lodash"; console.log
阅读全文
摘要:什么是CDN? 购买CDN服务器 第三方库的CDN服务器 认识shimming【了解】 Shimming预支全局变量 MiniCssExtractPlugin 目录结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=
阅读全文
摘要:认识代码分离 多入口起点 Entry Dependencies(入口依赖) SplitChunks SplitChunks自定义配置 当然,我们可以自定义更多配置,我们来了解几个非常关键的属性: SplitChunks自定义配置解析 SplitChunks自定义配置解析 动态导入(dynamic i
阅读全文
摘要:如何区分开发环境 入口文件解析 配置文件的分离 目录结构 package.json { "name": "webpack_devserver", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "buil
阅读全文
摘要:为什么要搭建本地服务器? Webpack watch webpack-dev-server cnpm install --save-dev webpack-dev-server 注意,脚本是 "serve": "webpack serve" webpack-dev-middleware 【了解】 w
阅读全文
摘要:认识ESLint 使用ESLint npm install eslint -D npx eslint --init npx eslint ./src/main.js ESLint的文件解析 VSCode的ESLint插件 VSCode的Prettier插件 ESLint-Loader的使用 cnpm
阅读全文
摘要:为什么需要babel? Babel命令行使用 npm install @babel/cli @babel/core 插件的使用 Babel的预设preset cnpm install @babel/preset-env -D Babel的底层原理 babel编译器执行原理 中间产生的代码 babel
阅读全文
摘要:认识Plugin CleanWebpackPlugin HtmlWebpackPlugin 生成的index.html分析 自定义HTML模板 自定义模板数据填充 DefinePlugin的介绍 DefinePlugin的使用 CopyWebpackPlugin 目录结构 wk.config.js
阅读全文
摘要:案例准备 file-loader 文件的名称规则 设置文件名称 设置文件的存放路径 url-loader url-loader的limit 目录结构 wk.config.js const path = require('path'); module.exports = { entry: "./src
阅读全文
摘要:webpack默认打包 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
阅读全文
摘要:前端发展的几个阶段 前端开发的复杂化 前端三个框架的脚手架 Webpack是什么? Webpack官网图片 工作中的webpack 日常工作来说,比如在开发vue、react、angular等项目的过程中我们需要一些特殊的配置:比如给某些目录结构起别名,让我们的项目支持sass、less等预处理器,
阅读全文
摘要:画图 : 接口访问路径 前端页面 === 接口服务器 === 数据库服务器 == 数据库 第一小步 : 打开 : 数据库服务器 打开 , 点击 【启动MySQL】 第二小步 : 导入数据库 1. 打开 【双击 即可 】 2. 点击 : 创建一个 连接 3. 用户名和密码 : root root(不能
阅读全文
摘要:一、vue 是 单文件组件 导 : 之前注册组件有什么缺点 ? 1- 缺乏语法高亮 2-格式不好整体 3-没有专门的写css代码等等 参考 : vue ⇒ 工具 ⇒ 单文件组件 什么是单文件组件 ? 后缀为 .vue 的文件 单文件组件的三个组成部分 (代码块 : scaffold 自动提示) te
阅读全文
摘要:webpack 使用步骤 一、webpack 第一阶段 命名初始化阶段 项目名不能有汉字,不能取名叫 webpack 1、创建项目名称,并生成 , 命令 : 2、安装 : 3、创建一个 文件 4、在 的`scripts`中,添加脚本 5、运行 : 6、设置开发状态 : 隔行变色案例 1. 创建 2.
阅读全文
摘要:一、vue 是 单文件组件 导 : 之前注册组件有什么缺点 ? 1- 缺乏语法高亮 2-格式不好整体 3-没有专门的写css代码等等 参考 : vue ⇒ 工具 ⇒ 单文件组件 什么是单文件组件 ? 后缀为 .vue 的文件 单文件组件的三个组成部分 (代码块 : scaffold 自动提示) te
阅读全文