weixin_43294560的博客

原创 js Object方法

(1)var 对象=Object.create(指定对象,{配置对象});该方法创造的对象无原型 1、指定对象将会作为赋值对象的原型 2、配置对象中的属性将会称为赋值对象的属性 3、配置对象中，属性名:{配置信息} value:属性值 writable:true/false 是否可修改,默认为false configurable: true/false 当前属性是否可被删除,默认为false enumerable：true/fasle 是否可以能用 for in 枚举，默认为fal

原创 webpack4 react局部热加载

1、下载 cnpm install -D react-hot-loader 在devServer中开启hot:true 2、配置 创建.babelrc文件,在"plugins"的数组中最顶层添加 "plugins": ["react-hot-loader/babel"] 方式一: import { hot } from 'react-hot-loader/root'; 确保在react和react-dom之前引入 export default hot(需要局部热加载的组件);

原创 前端优化 域名预解析

当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行DNS 的解析,减少用户等待时间,提高用户体验。 其中Chrome和Firefox3.5+内置了DNS Prefetching技术并对DNS预解析做了相应优化设置。使用: dns-Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。具体使用方法如下： <link rel=”dns-prefetch” href=”url地址”

原创 webpack4 express中间件webpack-dev-middleware线上运行环境

1、下载 cnpm install webpack-dev-middleware -D 2、配置 const webpack = require('webpack'); const middleware = require('webpack-dev-middleware'); const config = require('../webpack.config'); 配置webpack const compiler = webpack(config); const express = requ

原创 将图片转换成base64

data:图片类型;base64,图片二进制Buffer.toString('base64')图片类型可以使用mime库根据图片后缀进行转换base64格式:

原创 js 将字符串转换成base64格式

1、字符串必须是buffer类型2、.toString('base64')即可

原创 获取文件类型和文件后缀以及相互转化(mime库)

1、下载 cnpm install -D mime2、使用(https://github.com/broofa/mime#readme) const mime = require('mime') 传入文件后缀或包含后缀的文件路径 mime.getType('txt'); ⇨ 'text/plain' 传入文件类型 mime.getExtension('text/plain'); ⇨ 'txt'...

原创 webpack4 常用插件

1、copy-webpack-plugin拷贝文件(1)下载 cnpm install copy-webpack-plugin --save-dev(2)配置 const CopyPlugin = require("copy-webpack-plugin"); plugins:[ 支持glob匹配语法和占位符等 new CopyPlugin({ patterns: [ { from: "**/*",

原创 webpack4 expose-loader、ProvidePlugin将第三方库的变量暴露在全局变量上、无需导入即可使用的变量

1、将变量暴露在全局变量上 1、下载 cnpm install expose-loader --save-dev webpack4:expose-loader@1 2、配置 方式一:内联loader 在文件中,示例: import $ from 'expose-loader?exposes=$,jQuery!jquery' 将$和JQuery暴露在全局变量上,如window import { map, reduce,

原创 webpack 优化体积可视化分析webpack-boundle-analyzer插件

1、下载 cnpm install -D webpack-boundle-analyzer2、配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; plugins:[ new BundleAnalyzerPlugin() ] 其他参数: analyzerMode:'server'，可以是server，static，json，disabled。在server模

原创 webpack4 优化耗时分析speed-measure-webpack-plugin插件

能够列出输出、loader和plugins的耗时,过长将会使用黄色和红色显示1、下载 cnpm install -D speed-measure-webpack-plugin 2、使用 const SpeedMeasurePlugin=require('speed-measure-webpack-plugin') const smp = new SpeedMeasurePlugin(); smp.wrap({配置config})效果图:代码示例:const path = requ

原创 npm 发布

1、发布前准备: 对项目做 冒烟测试 单元测试和测试覆盖率 持续集成如TravisCL2、发布 (1)package.json的name字段即为包名 (2)npm login 若无注册npm账号 (2)npm publish 3、版本更新 运行更新命令后 git push origin master npm publish...

原创 运行删除指定文件库rimraf

1、下载 cnpm install -D rimraf2、使用 const rimraf = require('rimraf'); rimraf('指定目录',()=>{ 删除成功回调 })代码示例:const path = require('path');const webpack = require('webpack');const rimraf = require('rimraf');const Mocha = require('mocha');const mo

原创 webpack4 冒烟测试

1、下载 cnpm install -D rimraf cnpm install -D mocha2、引入配置好的webpack环境,通过rimraf库每次运行删除dist目录,通过mocha添加测试脚本 (1)配置mocha const mocha = new Mocha({ timeout: 10000, }) (2)每次运行删除dist目录,并在其中通过webpack方法运行webpack配置等 rimraf('./dist',()=>{ webpack(p

原创 node process模块

属性: process.pid：当前进程的进程号。 process.version：Node的版本，比如v0.10.18。 process.platform：当前系统平台，比如Linux。 process.title：默认值为“node”，可以自定义该值。 process.argv：当前进程的命令行参数数组。 process.env：指向当前shell的环境变量，比如process.env.HOME。 process.execPath：运行当前进程的可

原创 webpack4 合并weback配置webpack-merge

1、下载 cnpm install -S webpack-merge2、使用 module.exports=a module.exports=b const merge=require('webpack-merge') merge(a,b); 会将a和b的配置项合并,并且后面的会覆盖前面的配置项

原创 webpack4 构建工程化配置理论要求

原创 weback4 构建自定义错误异常捕获处理

在plugins中添加方法 function () { this.hooks.done.tap("done", (stats) => { if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1) { console.log('build error'); 可以进行错

原创 webpack4 简化构建输出插件friendly-errors-webpack-plugin

1、下载 cnpm install friendly-errors-webpack-plugin -D 2、配置 plugins: [ new FriendlyErrorsWebpackPlugin(), ]3、其他情况 webpack-dev-server中使用: devServer: { quiet: true, },

原创 webpack SSR打包(React)

1、修改打包的入口文件将import语法改成require 导出格式为:module.exports = <组件名 />;2、配置webpack.config.js 如果配置了optimization代码提取的选项,可能导出的包为空 (1)输出的打包文件不需要hash值 (2)配置基本不变,output添加library导出格式 libraryTarget:'umd' 兼容node环境 3、在node服务器中 (1)引入打包后的文件 (2)引入renderToStri

原创 webpack4 打包组件或库并发布到npm上

打包方式和打包项目时类似(1)下载压缩插件 cnpm install terser-webpack-plugin@4 -D webpack5不需要下载(2)配置 (3)打包发布 "script":{ "build":"webpack" "prepublish":"webpack" } 添加prepublish钩子,表示执行npm publish的时候会执行"build"命令和该命令 先npm login登录npm账号...

原创 webpack4 多页面打包

方式一: 将entry修改为对象形式的多入口方式,每个入口对应对应一个html-webpack-plugin 通过html-webpack-plugin中的chunks属性,引入entry中对应的chunk

原创 webpack4 资源文件内联

减少请求和避免闪动js和html内联: html: <%= require('raw-loader!文件路径') %> 如:<%= require('raw-loader!./meta.html') %> js:内联时还需要添加babel-loader解析es6语法 <%= require('raw-loader!babel-loader!文件路径') %> 如:<script><%= require('raw-loa

原创 css 浏览器前缀

原创 node 调试模式

node --inspect-brk 文件路径(1)在文件中要调试的位置添加debugger(2)运行指令后打开对应的网址即可

原创 匹配输出文件/目录库路径globby库

专门用来匹配文件和目录的库,是扩展于glob库glob:https://github.com/mrmlnc/fast-glob#options-3globby:https://github.com/sindresorhus/globby#readme1、下载 cnpm install -D globby2、使用 const globby = require('globby'); 异步(Promise方式): const res=await globby(['要处理的文件正则表达式'

原创 webpack4 自定义插件plugins

插件即是一个class类,wb会调用其中的apply方法涉及到的内容:compiler、tapable和compilation配置: class X{ apply(compiler){ compiler.hooks.钩子('事件名称',(回调参数)=>{ compilation在thisCompilation钩子中初始化 compilation的钩子监听模块 compilation的方法对打包资源进行操作 }) } }添加文件时,需要满足web

原创 webpack4 插件钩子库tapable、compiler和compilation

1、tapable,官网:https://github.com/webpack/tapable 钩子: SyncHook, 出没出错都往下走 SyncBailHook, 有返回值就会退出,无返回值继续 SyncWaterfallHook, 瀑布流钩子,可以注册很多钩子,上一个钩子结果会给下一个 SyncLoopHook, 同步,遇到某个不返回undefined的监听函数,就重复执行 AsyncParallelHook, 并行执行 AsyncParalle

原创 node util模块

1、引入 const uitl=require('util') uitl.promisify(fn); 将异步方法改造成Promise

原创 webpack4 自定义loader

loader:(文档:https://webpack.docschina.org/api/loaders/) (1)解析从前往后,但调用为从后到前(loader为module.exports暴露的方法,而非.pitch) (2)解析从前往后,module.exports.pitch方法会从前到后调用 (3)通过添加module.exports.raw = true; 默认情况下，资源文件被转换为UTF-8字符串并传递给加载器。通过将raw标志设置为true，加载器将接收到原始缓冲区。允许每个加载器

原创 webpack vue分析

代码分析示例:module.exports={ mode: 'development', context: 'D:\\webpack_code\\webpack5\\webpack_demo_vue2', node: { setImmediate: false, process: 'mock', dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process:

原创 webpack4 react分析

修改/定义环境变量 "start": "cross-env INLINE_RUNTIME_CHUNK=false node scripts/start.js" cross-env定义环境变量的库,将变量添加到process.env上,使用前需要下载

原创 webpack4 dll动态链接库打包第三方库

好处: (1)dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。 (2)App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。 (3)假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。 (4)之前将第三方库代码和源代码分离形成一个js文件,而它能把第三方库代码分离开,并且每次文件更改的时候,只会打包该项目

原创 webpack4 通过cdn引入外部资源打包

1、与mode同级配置,则不会打包jquery externals: { jquery:'jQuery', 库名:'替代的全局变量字符串' } 2、在html文件中引入cdn链接即可代码示例:const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin= require('mini-css-extract-pl

原创 webpack4 多进程打包耗时loader、并行压缩

1、下载 cnpm install -D thread-loader2、使用 这个loader放置在其他loader之前， 放置在这个loader之后的loader就会在一个单独的worker池(worker pool)中运行 在worker池(worker pool)中运行的loader是受到限制的。例如 (1)这些 loader 不能产生新的文件。 (2)这些 loader 不能使用定制的 loader API（也就是说，通过插件）。 (3)这些 loader 无

原创 webpack4 离线访问(渐进式网络)PWA

1、下载 cnpm install workbox-webpack-plugin -D2、若开启了eslint,则修改package.json,添加环境变量 "eslintConfig": { "extends": "airbnb-base", "env":{ "browser":true } },3、将代码运行在服务器上,serviceworker必须允许在服务器上 cnpm install -g serve serve -s 要允许的目

原创 webpack4 代码懒加载、预加载

1、新增.eslintrc,解决启用了eslint后import 只能在顶层使用的报错 { "parser": "babel-eslint", "parserOptions": { "sourceType": "module", "allowImportExportEverywhere": true } }2、利用es10的import进行懒加载,触发某个条件后从加载文件 将直接 import {xx} from '其他文件'写法改

原创 webpack4 代码分割以及提取公共第三方库以及公共使用文件

方式一: (1)修改entry 键名任意取 entry: { main: './src/js/index.js', test: './src/js/print.js', html:'./src/index.html' 为了启有webpack-dev-server热更新不失效时才添加 }, (2)修改output: output: { filename: 'src/js/[name].[hash:10].j

原创 webpack4 去除未使用代码tree shaking

1、设置生产环境 mode='production' 2、配置 在package.json中,与dependencies同级设置 "sideEffects":false, 所有文件都没有副作用,可以安全修剪,可能会将导入的css或者@babel/polyfill等文件删掉 "sideEffects":["*.css"] 指定不修剪css文件 参考网址:https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-sid

原创 webpack4 资源缓存

1、babel缓存 在babel-loader中,在options内添加属性 cacheDirectory:true2、文件资源缓存 在打包输出文件的文件名中添加hash值 hash值缓存,根据每次打包后webpack生成的hash值不同来加载资源 会因为使用的都是webpack每次打包后的hash值,导致改动一处,其他资源都改动,都重新加载了 chunkhash值缓存,打包来源同一个chunk,生成的hash值就一样 如果css在js中引入,则因为属于同一个chunk,导致