qt的博客

webpack分包

起源是在测试时候没有报错，系统功能不正常，和测试查找错误很麻烦埋点就是在某个功能函数里上报一些信息，比较类试express的中间件机制，但是没有操作的权限自定义express的打印日志中间件app.get("/", (req, res) => { // console.log(`${req.method} ${req.url} ${Date.now()}`) logger(req); res.send("index");});app.get("/about", (req, .

工程化概述工程化的定义和主要解决的问题因为前端的发展过快，在开发中占据很大地位，业务不断提高，逻辑更加复杂，从传统的网站到现在的H5，移动APP，各种小程序，桌面应用，所以对前端的要求更加严格传统开发的劣势从传统的后端写demo，套模板，调页面方式已经不再适应，不符合开发的要求了面临的问题，技术是为了解决问题存在的，解决ES6+的新特性浏览器不兼容，Less或sass或postcss增强运行环境不支持，模块化或者组件化方式提高项目的可维护性运行环境不支持部署上线前需要手动压缩袋吗及资源文件

概要脚手架的本质作用创建项目基础的结构，提供项目规范和约定约定：相同的组织结构相同的开发范式相同的模块依赖相同的工具配置相同的基础代码例如：IDE创建项目的过程就是一个脚手架的工作流程前端脚手架 – 独立的工具常用的脚手架工具React项目 – create-react-appVue项目 – vue-cliAngular项目 – angular-cli根据信息创建对应的项目基础结构Yeoman – 通用性项目脚手架工具，根据一套模板生成对应的脚手架项目Plop – 创建特

地址 ： https://gitee.com/qitian88/qftwork/tree/master/fed-e-task-02-01/%E7%AE%80%E6%98%93%E8%84%9A%E6%89%8B%E6%9E%B6只是简单实现，可以在 app下新建多个文件修改写入实现主要实现依赖于 Yeoman自定义generatorgenerator本质上就是一个npm模块，yeoman的generator必须是以generator-name的格式，如果不采用这种格式，yeoman后续就无法找到所

Gulp 基本使用gulp ：高效，易用，在项目中先安装项目依赖，导出相关函数方式yarn init --yesyarn add gulp --devcode gulpfile.js// gulp的入口文件,默认开启异步任务exports.foo = done =>{ console.log('foo start') done(); // 标识任务完成}exports.default = done =>{ // 默认任务 console.log('de

自动化构建重复的工作都应自动化自动化工作流：脱离运行环境兼容带来的问题，使用提高效率的语法，规范和标准ECMAScriptSASS模板引擎：增强减少重复的html都需要自动化构建工具，转义，被浏览器支持自动化的体验Sass编译yarn add scss --dev 安装sass依赖sass scss/main.sass css/style.css 编译后路径NPM Scripts 解决重复执行的命令，也是实现构建工作流最简单的方式在package.json 中添加scr

Rolluprollup与webpack十分相似 Rollup更为小巧，只是ESM的打包器 不支持HMR(模块热替换)这种高级特性是为了提供ESM各种特性的高效打包器快速上手yarn add rollup --dev 安装依赖 会在 node-modules 下 bin/ rollup 提供一个cli程序运行 yarn rollup yarn rollup ./src/index.js 打包入口文件是index.js yarnrollup ./src/index.js

模块打包工具ES Module存在环境兼容问题模块文件过多，网络请求频繁所有前端资源都需要模块化新特性代码编译模块化JavaScript打包支持不同类型的资源模块打包工具概要webpack作用模块打包器(Module bundler)模块加载器（Loader）代码拆分(Code Splitting),实现模块渐进式加载或者增量加载资源模块(Asset Module)打包工具解决的是前端整体的模块化，并不单值JS模块化webpack上手yarn init --yes 初始

自动编译watch工作模式监听文件变化，自动从新打包启动命令时 yarn webpack --watch自动刷新浏览器BrowserSyncbrowser-sync dist --files “**/*”操作麻烦开发效率低webpack Dev Server提供用于开发的HTTP Server集成了自动编译 和自动刷新浏览器等功能yarn add webpack-dev-server --devyarn webpack-dev-server为提高工作效率，并没有将打包结果写

1.模板:(1)html-loader:将HTML文件导出编译为字符串，可供js识别的其中一个模块(2)pug-loader : 加载pug模板(3)jade-loader : 加载jade模板(是pug的前身，由于商标问题改名为pug)(4)ejs-loader : 加载ejs模板(5)handlebars-loader : 将Handlebars模板转移为HTML2.样式:(1)css-loader : 解析css文件中代码(2)style-loader : 将css模块作为样式导出到D

https://www.webpackjs.com/plugins/ 官网插件地址以下是常用插件列表happypackdllplugincommons-chunk-pluginwebpack-dev-serverwebpack-dev-middlewarewebpack-hot-middleware（HMR）webpack-hot-server-middlewarehttp-proxy-middlewarehtml-webpack-pluginextract-text-webpac

规范化标准规范化是践行前端工程化中重要的一部分因为软件开发需要多人协同不同开发者代码风格不同增加项目开发成本团队需要明确同一的标准需要标准化地方代码、文档、提交日志开发中编写的代码代码标准化很重要实施方法 人为约定 工具实现Lint常见的规范化实现ESLint使用定制ESLint校验规则ESLint对TS的支持ESLint结合自动化工具或webpackESLint的衍生工具Stylelint工具的使用ESLint介绍最为主流的JS lint工具检测JS代码

Loaderloader 就是一个 node 模块loader 导出一个函数，loader 会在转换源模块（resource）的时候调用该函数loader 的功能：把源模块转换成通用模块loader的使用webpack.config.jsconst path = require('path')module.exports = { mode: 'none', entry: './src/main.js', output: { filename: 'b

webpack 自定义插件的开发官网 https://webpack.js.org/api/compiler-hooks/实现思路创建一个plugins构建函数扩展 apply 方法指定webpack自身的事件钩子处理webpack内部实例的特定数据功能完成后，调用webpack提供的回调插件是通过在生命周期的钩子挂载函数实现扩展插件 实现对所有js文件去除注释class MyPlugin { apply (compiler) { console.log('MyPl

Node 读取配置新增 ip.js//build/IP.jsconst os = require('os') // Node.js 的 os 模块提供了一些基本的系统操作函数module.exports = { getIp(){ const ifaces = os.networkInterfaces() // 获得网络接口列表。 let ip = '' for(const dev in ifaces) { ifaces[dev].forEach(functi

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，将有依赖关系的模块打包成静态资源。webpack 自然就采用了折中的法子，编译所有模块时，将彼此关系密切的模块打包在一起，因此多个模块被分割成若干个小包，形成多次小请求，模块包可以按需加载，比如一个多页面网站，不同页面其实有很多公共的代码块，这时就可以优先加载，其他的按需加载。至于代码如何分割，取决于开发者。webpack 功能全面，模块系统不只对 javascript 进行模块化打包，其实.

Gulp 不具备任何具体功能，完全自主，自定义性强Tasks Runner需要开发者自己实现各种功能对 Node.js 储备要求高强调任务的概念，Gulp 本身实际上是一个任务调度工具（tasks runner）通俗点说：Gulp 就是你想干什么就干什么～Webpack 从模块打包出发，通过插件实现一部分 Web 项目的自动化任务模块化打包功能开箱即用，相对门槛更低主要应对 SPA 类应用的模块打包因为近几年 Webpack 的插件生态很好，以往我们使用 Gulp 去实现.

npm or yarn前端包管理工具yarn.lock / package-lock.jsonyarn / npxyarn 可以自动找到 node_modules/.bin 下的可执行文件，npx 也可以yarn create => create-npx 可以直接执行 远端（线上）模块，一次性使用全局安装 or 本地安装全局安装模块：只有本地经常用到，而且与某一个特定项目无关的工具或者模块脚手架类型的工具，建议使用 npx / yarn create，一次性使用其他所有的

如何将nuxt项目进行发布部署打包 Nuxt.js 应用命令描述nuxt启动一个热加载的web服务器(开发模式) localhost://3000nuxt build利用webpack编译应用，压缩js和css(发布用)nuxt start以生产模式启动一个web服务器（需要先执行nuxt build）nuxt generate编译应用，并依据路由配置生成对应的html文件(用于静态文档部署)可以将 命令加入到package.json中执行np

首先下载git查看版本 git --versiongit 配置git config --global user.name “xxx” 配置用户名git config --global user.email “123@163.com” 配置邮箱查看当前配置 git config --listgit 直接能看所有的命令创建仓库创建一个文件夹git init 初始化仓库或者 git init 目录文件夹git clone 地址 拷贝文件到本地基本使用git s

初始化cli

搭建自己的SSRmkdir vue-ssrcd vue-ssrnpm init -ynpm i vue vue-server-renderer创建server.js使用node运行服务端会将vue渲染成字符串server.jsconst Vue = require('vue')const renderer = require('vue-server-renderer')const app = new({ template:` <div id="app"

GridsomeGridsome是什么一个免费、开源、基于Vue.js技术栈的静态网站生成器官方网站： https://gridsome.orggithub ： https://github.com/gridsome/gridsome什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据 ，生成静态HTML文件及相关资源的工具此功能也叫预渲染生成的网站不需要类似php这样的服务器只需要放到支持静态资源的web Server或者CND 上运行即可优点省钱，不需要专业服

目的：做一个博客，使用gridsome基础知识点的巩固gridsome create blog-with-gridsomenpm run develop 启动项目处理首页模板使用一个bootstrap 开源项目作为基础地址： https://https://github.com/StartBootstrap/startbootstrap-clean-blog将项目下载下来，将模板套到本地项目项目安装bootstrap npm i bootstrapyarn add @fort

Vite 介绍概念：Vite是一个面向现代浏览器的一个更轻，更快的web应用开发工具它基于ECMACript标准原生模块系统(ES Module)中的type=“mudole” 特性实现Vite 项目依赖Vite@vue/compiler-sfc : 编译.vue结尾的单文件组件基础使用vite servevite build使用serve时候，会开启一个web服务器，在开启服务器，不需要像vue-cli进行编译文件，启动非常快vite servevue-cli s