- 博客(15)
- 收藏
- 关注
RSS订阅原创 webpack v4+升级v5+ 踩坑笔记
工作中遇到了一个小问题，然后搞了两天，怀疑是webpack的问题，因此升级了现有项目的webpack，webpack v4+ 升级到了 v5， node v12+ 升级到了 node v16+， 本来打算升v17的， 发现和16版本改动不小， 和开发其他项目还得切回了， 索性就降到了v16，因此node升级到v17，要慎重啊！！！.........
2022-07-07 23:26:59
1527
1
原创 @microsoft/signalr 实现实时通讯踩坑日记
安装yarn add @microsoft/signalr其余安装方法可参考以下链接： ASP.NET Core SignalR JavaScript 客户端文档使用方法import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';export default class Signalr { url: string; signalr: HubConnection | null; connectio
2021-12-08 21:09:59
4733
原创 动态改变SVG的颜色
最近写页面，根据设计标签 hover的时候需要改变图片颜色状态，切下的图又是svg格式，使用外部引入的方式；网上搜索发现1、可以在svg文件中更改fill属性更改图片，但是就不能动态更改了呀；除非使用内敛方式，但是页面中展示svg内容感觉不是很好；2、查看path标签内fill属性的值，要实现鼠标移入更改svg颜色，即修改fill属性值svg:hover path{ fill:red;}但是我用的是img标签引入的，好像是找不到svg的，也不太行3、通过网上查看可以使用 css filt
2021-05-16 15:54:01
25063
原创 react 之 styled-components
css样式并不像JavaScript语法有作用域，因此css样式作用于全局很容易造成全局污染，为了防止这类问题发生，我们可以遵循CSS的BEM规范，即：blockName-elementName–modifierName（模块名 + 元素名 + 修饰器名），也可以使用webpack中CSS-module消除全局污染的问题，只对引用的目录下的样式文件进行编译。还可以使用css样式私有化，如vue中style标签的scoped属性，react中可以使用styled-components插件来实现styled-
2020-11-02 22:01:40
309
原创 webpack 环境变量 区分环境
webpack.DefinePlugin有时我们需要根据运行的是开发环境还是生产环境对变量进行定义，那么我们就可以使用webpack自带的插件 webpack.DefinePlugin；来创建一个全局变量例如： // index.js let url; if(DEV === 'dev') { url = 'http://localhost:3000' }else { url = 'https://www.baidu.com/' } console.log(typeof FLAG)
2020-07-22 22:42:25
520
原创 webpack 本地开发时的跨域及react中跨域
跨域由于浏览器的安全机制，规定了同源策略，即只允许同源下的接口交互。同源即协议、域名、端口号相同。那么要想访问其他域下的接口就涉及到了跨域。js中跨域有一下几种方法CORS 跨域nginx服务器代理jsonp那么在webpack中是如何配置跨域的呢？一、同域但端口号不同下使用 devServer.proxy// webpack.config.jsdevServer: { proxy:{ '/api':{ // 重写路径可以整理 指定的访问路径 target: 'http:
2020-06-30 22:01:21
645
原创 向大佬求教一下webpack问题
@babel/plugin-transform-runtime自己搭建webpack时使用了这个babel插件，但是打包后的文件打开时会报Cannot assign to read only property 'exports' of object '#<Object>'这种错误。在网上看了一下是，import 和 module.exports 混用导致，但是我的文件中并没有使用过module.exports引用，因此怀疑是打包造成的使用了以上babel插件。在网上找到了几种方法
2020-06-29 21:11:36
4268
原创 webpack 常用小插件
cleanWebpackPlugin清除webpack生成的文件，默认删除output中路径的文件。一般我们都会在输出文件的名称中加上哈希，但是这样就导致了，每次打包后还存留之前打包的文件，因此我们就需要这个插件清除之前生成的文件，只保留最新的打包文件安装npm install clean-webpack-plugin -D // 引入 const { CleanWebpackPlugin } = require （' clean-webpack-plugin '） ; // 使用 modu
2020-06-10 22:05:06
152
原创 webpack ---devtool / watch
devtoolwebpack devtoolwebpack 的配置项： 此选项控制是否生成，以及如何生成 source map。
2020-06-08 21:44:28
214
原创 工作中遇到的小知识点 ---查漏补缺 (1)
1、jQuery.extend() // jQuery 库中将一个或多个对象合并成目标对象对象的方法// $.extend( flag, target, obj1, ...objN )// flag 表示是否深度合并，可以省略// target 目标对象、 obj1，objN 要一起合并的对象var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana:
2020-06-02 22:56:17
347
原创 webpack 中对 图片处理
webpack中图片的处理web开发中肯定会用到图片，那么webpack中对图片的处理也需要相应的loader；一般文件中引入图片有三种方式：js文件中通过 import imgSrc from './photo'； img.src = imgSrc引入在css文件中作为背景图引入在html文件中直接引入 <img src='./photo' />先说css情况，图片做为背景图引用时，打包css的loader中就会带有处理图片；html中的文件需要使用html-loadernp
2020-06-01 22:27:00
463
原创 webpack ---webpack-dev-server及html-webpack-plugin
webpackwebpack就是静态模块打包器，将应用程序所需的一个多个模块打包成一个或多个bundle。webpack 的四个核心部分：入口(entry)、输出(output)、loader、插件(plugins)。另外还有 mode 模式： 表示打包的是dev环境还是production生产环境。安装：js cnpm i webpack webpack-cli -D; 使用淘宝镜像安装在开发环境中， 安装 webpack 及 webpack-cli； webpack 的运行需要依赖 webpac
2020-05-25 21:13:32
305
原创 crypto DES 的加密与解密
crypto DES 的加密与解密最近在做一个类似举报功能的项目,其中需要对举报的内容及其他敏感信息进行des加密,因此接触并学习了一下,但是还是碰上一些坑(先在这里留一个坑吧,加密后的数据传到后端,然后在从后端取出来,内容并未变但是解密为空)下面先直接上方法首先要先安装crypto cnpm i crypto// DES 加密// message 为要加密内容// key为秘钥必须为：8/16/32位export const encryptByDES = (message, key="t
2020-05-25 20:54:26
1369
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人