liixnhai的博客

1.增加本地hosts配置,ip 到域名2. 修改devserver 代理配置secure: false,changeOrigin: true,

yarnyarn，有个“提取所有包的公共依赖到最外层"的优化机制。npmnpm默认只对“一个包内的公共依赖处理到内部顶层node_modulse内“。babel-plugin-transform-runtime/https://babeljs.io/docs/en/babel-plugin-transform-runtime/...

1、问题描述使用webpack,devserver,proxy,代理到服务端，调用一个下载文件流接口，发现一直报502。但是使用postman或者谷歌浏览器不走代理直接访问是可以的。正确时报文错误时：2、原因分析猜测：代理配置错误了排查n遍，代码无误，其他同一服务的接口正常。猜测：前端请求类型写错了各种content-type设置均尝试无效。猜测：后端安全拦截改接口，不让走代理了确认没做猜测：服务器安全策略限制了，不让走代理确认没做猜测：后端响应content-type,写死

今天深入学习理解了一句话：不是非黑就是白，也不是非白就是黑。 exclude只保证你配置的这个一定黑，不代表其他都是白。include只保证你配置的这个一定白，不代表其他黑。

1、介绍webpack只是标记语句依赖以及是否使用,tree-shaking的具体实现一般是由压缩器提供实现, 如webpack默认的压缩工具terser-webpack-plug就支持tree-shaking演示配置const path = require('path');module.exports = { mode: 'production', entry: './src/index.js', output: { // filename: 'bundle.js'.

1、为何要有binging(binary)编译其他语言开发的包为.node，让nodejs可以调用，达到复用的目的。node-gyp，这个库，学习下。https://www.npmjs.com/package/node-gyp示例：node-sass源码二、理解cache和解析binary算法三、验证...

1、SSR 代码实现思路服务端·使⽤ react-dom/server 的 renderToString ⽅法将React 组件渲染成字符串服务端路由返回对应的模板客户端打包出针对服务端的组件const fs = require('fs');const path = require('path');const express = require('express');const { renderToString } = require('react-dom/server');const

1、构建时的⽇志显示展示⼀⼤堆⽇志，很多并不需要开发者关注2、统计信息 statserrors-only noneminimal none 只有发生错误或有新的编译时输出none false 没有输出normal true 标准输出verbose none 全部输出3、如何优化命令⾏的构建⽇志使⽤ friendly-errors-webpack-plugin· success: 构建成功的⽇志提示· warning: 构建警告的⽇志提示· error: 构建报错的⽇志提示stats

1、构建配置抽离成 npm 包的意义通用性·业务开发者无需关注构建配置·统一团队构建脚本可维护性·构建配置合理的拆分·README 文档、ChangeLog 文档等质量·冒烟测试、单元测试、测试覆盖率·持续集成2、构建配置管理的可选方案1通过多个配置文件管理不同环境的构建，webpack --config 参数进行控制2将构建配置设计成一个库，比如：hjs-webpack、Neutrino、webpack-blocks3抽成一个工具进行管理，比如：create-react-app.

1、stats: 构建的统计信息学到了：一、初级分析：webpack 内置的 statspackage.json 中使用 stats"build:stats": "webpack --config webpack.prod.js --json > stats.json",二、Node.js 中使用const webpack = require('webpack');webpack (config,（err,stats）={})三、速度分析：使用 speed-measure-webpa

1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。使用：webpack 默认支持，在 .babelrc 里设置 modules: false 即可 · production mode的情况下默认开启 要求：必须是 ES6 的语法，CJS 的方式不支持...

一、babel-polyfill 打包后体积：88.49k，占比 29.6%这是个问题二、动态 Polyfill方案1、babel-polyfill react官方推荐 缺点体积大200k+2、babel-plugin-transform-runtime能只polyfill用到的类或者方法 ，体积较小不能polyfill原型上的方法3、自己map、set的polyfill定制化，体积小重复造轮子就算体积小，但是所有都加载4、polyfill-service 较好只返回给用户需要的..

1、分包：设置 Externals思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中方法：使用 html-webpack-externals- pluginconst HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');new HtmlWebpackExternalsPlugin({externals: [{module: 'react',entry..

多进程/多实例：并行压缩1、方法一：使用 parallel-uglify-plugin 插件2、方法二：uglifyjs-webpack-plugin 开启 parallel 参数3、方法三：terser-webpack-plugin 开启 parallel 参数optimization: { minimizer: [ new TerserPlugin({ parallel: true, cache: true }) ]},...

1、多进程/多实例构建：资源并行解析可选方案可选thread-loader或者 HappyPack或者parallel-webpack2、多进程/多实例：使用 HappyPack 解析资源原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中const HappyPack = require('happypack');{module: { rules: [ { test: /.js$/, //...

一、要求：基于 Node 库的 imagemin 或者 tinypng API使用：配置 image-webpack-loader{test: /.(png|jpg|gif|jpeg)$/,use: [{loader: 'file-loader',options: {name: '[name]_[hash:8].[ext]'}},{loader: 'image-webpack-loader',options: {mozjpeg: {progressive: true,qual

Scope HoistingTree-shaking公共资源分离图片压缩动态 Polyfill

一、使用purifyCss，遍历代码，识别已经用到的CSSpurifyCSS不再维护，使用purgecss-webpack-plugin基于purifycss开发的，mini-css-exract-plugin提取CSS插件配合使用二、uncss，html通过jsdom加载，样式通过postCSS加载，通过document.queryselector，来识别html内不存在的选择器。...

1、缓存思路：· babel-loader 开启缓存· terser-webpack-plugin 开启缓存· 使用 cache-loader 或者 hard-source-webpack-pluginoptimization: {minimizer: [new TerserPlugin({parallel: true,cache: true})]},2、缩小构建目标目的：尽可能的少构建模块比如 babel-loader 不解析 node_modul...

一、Tapable 是什么？Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子const {SyncHook, //同步钩子SyncBailHook, //同步熔断钩子SyncWaterfallHook, //同步流水钩子SyncLoopHook, //同步循环钩子AsyncParallelHook, //异步并...

安装 huskynpm install husky --save-dev通过 commitmsg 钩子校验信息"scripts": { "commitmsg": "validate-commit-msg", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" },"devDependencies": { "validate-commit-msg": "^2.1...

1、良好的 Git commit 规范优势：·加快 Code Review 的流程·根据 Git Commit 的元数据生成 Changelog·后续维护者可以知道 Feature 被修改的原因2、提交时类型选择提示，commitize不符合格式的日志拒绝提交的保障机制，validate-commit-msg工具+客户端、gitlab serverhook做统一changelog 文档信息生成，使用conventional-changelog-cli工具3、angular的g

1、px2rem-loader{ test: /.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'px2rem-loader', options: { remUnit: 75, remPrecision: 8 .

1、意义对于的 Web 应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是将你的代码库分割成chunks（语块），当代码运⾏到需要它们的时候再进行加载2、方式抽离相同代码到一个共享块 脚本懒加载，使得初始下载的代码更小3、实现懒CommonJS：require.ensureES6：动态 import（目前还没有原生支持持，需要 babel 转换）4、使用动态 import...

1、目标打包 js 库 需要打包压缩版和压缩版本 持 AMD/CJS/ESM 模块引2、使用方式ES moduleimport * as largeNumber from 'large-number';// ...largeNumber.add('999', '1');CJSconst largeNumbers = require('large-number');// ...largeNumber.add('999', '1');AMDrequire(['large-numbe.

1、单纯的测试框架，需要断言库MOCHA、AVA断言库·chai ·should.js ·expect ·better-assert2、集成框架，开箱即用jasmine、Jest3、编写单元测试用例技术选型：Mocha + Chai测试代码：describe, it, except测试命令：mocha add.test.js看下add.test.js代码const expect = require('chai').expect;const add ...

1、用系统命令rm -rf ./dist2、使用npm包安装rimraf "rimraf": "^2.6.3",利用npm scripts执行命令rimraf ./dist3、使用webpak插件可以在构建时，自动清理output配置的目录。"clean-webpack-plugin": "^2.0.2",const CleanWebpackPlugin = require('clean-webpack-plugin');看out目录:output

1.webpack-cli上一节知道，webpack命令会执行webpack-cli包的bin。那就接着看下webpack-cli包。package.json "bin": { "webpack-cli": "./bin/cli.js" }, "main": "./bin/cli.js",2../bin/cli.js 主流不用编译的命令数组。IIFE，立即调用函数表达式。// wrap in IIFE to be able to use retur..

1、原理compiler 在每次构建结束后会触发 done 这 个 hook；函数插件，内部this指向compiler ;2、编码 function() { this.hooks.done.tap('done', (stats) => { if (stats.compilation.errors && stats.compilation.errors.length && proc..

一、常用loaderswebpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型，并转为有效的模块，加入依赖图中。loaders，本身是个函数，接受源文件参数，返回转换结果。loaders，本身是个函数，接受源文件参数，返回转换结果。css-loader，支持css文件的加载解析 raw-loader，文件以字符串形式导入 thread-loader，支持多进程打包js、css file-loader，进行图片字体富媒体等的打包二、常用plugins

#!/usr/bin/env node// @ts-ignoreprocess.exitCode = 0;/** * @param {string} command process to run * @param {string[]} args commandline arguments * @returns {Promise<void>} promise */const runCommand = (command, args) => { const cp = ...