搜索到
104
篇与
的结果
-
chrome浏览器扩展v3版本配置项整理备忘 manifest.json配置文件{ //chrome插件的版本 "manifest_version": 3, //插件名称 "name": "ChromeName", //插件版本号 "version": "1.0.0", //插件描述，Plugin_Desc是多语言的key，chrome插件支持多语言配置，__MSG_xxx__ "description": "__MSG_Plugin_Desc__", //默认语言(如果当前浏览器设置的语言不存在多语言配置文件，则默认中文)，Chrome插件的多语言只能根据当前浏览器设置的语言来设定，无法通过代码更改语言 "default_locale": "zh_CN", //内容安全政策，V2的value是字符串，V3是对象 "content_security_policy": { //原文：此政策涵盖您的扩展程序中的页面，包括 html 文件和服务人员；具体不是很明白，但是参数值得是self，即当前自己 "extension_pages": "script-src 'self'; object-src 'self'", //原文：此政策涵盖您的扩展程序使用的任何[沙盒扩展程序页面]；具体不是很明白，但是参数值得是self，即当前自己 "sandbox": "sandbox allow-scripts; script-src 'self'; object-src 'self'" }, //key，发布插件后会给一个key，把那个key的值放这里 "key": "xxx", //icon，浏览器扩展程序管理里面的图标、浏览器右侧插件图标点开的下拉菜单展示的已开启插件的图标、以及插件详情页的标签卡的那个小图标 "icons": { "16": "static/img/logo-16.png", "19": "static/img/logo-19.png", "38": "static/img/logo-38.png", "48": "static/img/logo-48.png", "128": "static/img/logo-128.png" }, //背景页，后台脚本引入，v2是scripts:[xxx,xxx]，可以引入多个js文件，v3是service_worker：'xxx'，只能引入一个js，v3版最大的改动应该就是这里了，扩展程序管理界面的插件的那个“背景页”也将变成“Service Worker”，改动之后background.js将和浏览器完全分离，即无法调用window和ducoment对象 //可以看介绍： //1、//developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#background-service-workers； //2、//developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/ "background": { "service_worker": "background.js" }, //注入脚本，值是个数组对象，可以有多个对象 "content_scripts": [ //每个对象代表一个注入的配置 { //需要在指定页面注入的js脚本文件 "js": [ "xxx.js", "xxx.js", ], //需要注入js脚本文件的指定页面 "matches": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ], //不允许注入js脚本文件的指定页面 "exclude_matches": ["https://*.xxx.com/*"], //什么时候注入的js脚本，document_start=页面加载开始时，document_end=页面加载结束时 "run_at": "document_end" } ], //API权限，需要使用某些API时需要设置该API权限才行 "permissions": [ "contextMenus", //自定义创建右键菜单API "tabs", //tab选项卡API "storage", //缓存API "webRequest", //监听浏览器请求API ... ], //主机权限，在背景页backgroud.js里面或者popup页面走请求时，请求域名的白名单权限，如果没添加的则请求会失败 "host_permissions": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ], //动作API，原文：在 Manifest V2 中，有两种不同的 API 来实现操作： `"browser_action"` 和 `"page_action"` . //这些 API 在引入时扮演了不同的角色，但随着时间的推移它们变得多余，因此在 Manifest V3 中，我们将它们统一为单个 `"action"` API； //配置上action:{}，可以是空对象，但是action这个配置得有，不然的话扩展程序管理界面的“Service Worker”将显示无效， //且无法点开“Service Worker”的开发者工具控制台以及点击插件图标时触发的这个方法会报错：chrome.action.onClicked.addListener， "action": { }, //通过网络访问的资源，v2是提供一个数组，v3得提供数组对象，每个对象可以映射到一组资源到一组 URL 或扩展 ID "web_accessible_resources": [{ //允许访问的资源路径，数组传多个参数 "resources": ["*/img/xxx.png", "*/img/xxx2.png"], //允许访问资源的页面 "matches": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ] }] }消息监听1、插件内部发送消息//onMessage消息监听 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { console.log(request.text); //打印出来的值：“我是个测试内容” sendResponse('触发成功了'); //返回一个内容到发送消息的回调函数中 }); //发送消息，触发上面的onMessage chrome.runtime.sendMessage('', {text: '我是个测试内容'}, function (msg) { console.log(msg); //打印的内容是：“触发成功了” });2、除了在插件内部contenscript background 和 popup之间传递消息以外，其他网站也可以给插件发送消息。方法如下首先，需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息，相当于白名单，只有在白名单中的站点发送的消息，扩展才会监听//onMessageExternal消息监听 chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) { console.log(request.text); //打印出来的值：“我是个测试内容” sendResponse('外部触发成功'); //返回一个内容到发送消息的回调函数中 }); //发送消息，触发上面的onMessageExternal //第一个参数是插件Id，指定要发送给哪个插件 //第二个参数是想要传给插件的数据信息 //第三个是让插件那边调用的回调函数，触发回来 chrome.runtime.sendMessage('chromeId', {text: '我是个测试内容'}, function (msg) { console.log(msg); //打印的内容是："外部触发成功" });内部发送sendMessage不会触发到onMessageExternal,外部发送sendMessage不会触发到onMessage -
react 项目构建时构建失败提示XXXcannot be used as a JSX component react 项目构建时构建失败，报错信息如下[2023-06-06 11:12:51]TS2786: 'StatusTip' cannot be used as a JSX component. [2023-06-06 11:12:51] Its type 'FunctionComponent> & { LoadingTip: ForwardRefExoticComponent>; EmptyTip: ForwardRefExoticComponent<...>; FoundTip: ForwardRefExoticComponent<...>; ErrorTip: ForwardRefExoticComponent<...>; }' is not a valid JSX element type. [2023-06-06 11:12:51] 29 | <> [2023-06-06 11:12:51] 30 | <CommonHeader /> [2023-06-06 11:12:51] > 31 | <StatusTip style={{ position: 'absolute', ...loadingStyle, top: '45%' }} status="loading" /> [2023-06-06 11:12:51] | ^^^^^^^^^ [2023-06-06 11:12:51] 32 | </> [2023-06-06 11:12:51] 33 | ); [2023-06-06 11:12:51] 34 | } [2023-06-06 11:12:51]src/common/LazyLoading.tsx:36:13错误信息其实很明确，因为项目原来是好好的，在流水线中构建，突然出现的问题，肯定是构建环境问题，报错内容大概是说函数的返回值类型不能用作react组件，所以判断是ts的类型校验和我们原有项目的react版本不兼容，所以通过同步ts的版本和react的类型声明文件的版本解决yarn add -D @types/react@latest @types/react-dom@latest
-
-
a 标签的 rel 属性 定义a 标签的 rel 属性用于指定当前文档与被链接文档的关系。用于a标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 a 标签中同时使用。属性值noopener用于浏览器安全防护，防止钓鱼攻击。指示浏览器打开目标文档而不授予目标文档打开源文档的访问权限，打开添加了 rel=“noopener” 的链接，window.opener 会为 null。当打开不受信任的链接时，这个属性特别有用，可以确保目标文档无法通过Window.opener属性来篡改源文档，同时仍提供 Referer HTTP标头（除非同时使用noreferrer）。注意：使用noopener时，在决定是否打开新窗口/选项卡方面，除_top，_self和_parent 以外的非空目标名称都被视为_blank 。noreferrer浏览器导航到另一个页面时，阻止HTTP header将当前页面地址或任何其他值作为Referrer发送。可以使用 rel=“noreferrer” 禁用 HTTP 头部的 Referer 属性。nofllow用于指定搜索引擎不要跟踪链接。不要将该链接计⼊权重。例如⼀些⾮本站的链接，不想传递权重，但是⼜需要加在页⾯中的像 统计代码、备案号链接、供⽤户查询的链接等等。
-
windows系统下npm全局命令无法执行解决办法 如题，一般我们刚安装的windows操作系统，前往nodejs官网下载nodejs安装包后，windows下默认没有node和npm指令。这是因为我们的windows系统还没有添加nodejs环境变量，所以找不到路径。这时候需要将nodejs的安装路径添加到环境变量的 Path 变量中。如我的路径C:\Program Files\nodejs这时候，再回到cmd或者powershell，命令行就可以执行 node 命令了。但是还不能执行使用npm安装的全局包的命令。如 cnpm,nvm,nrm 等，解决办法如下1、使用 npm config get prefix 找到npm全局包的安装路径，如我的电脑输出路径为C:\Users\Administrator\AppData\Roaming\npm将这个路径也添加到环境变量 Path 中，重启cmd或powershell命令行工具就可以了。如果进行了上面的配置还是不行，并且控制台打印如下内容[](//upload-images.jianshu.io/upload_images/24769119-157c81028621d8b8.png?imageMogr2/auto-orient/strip|imageView2/2/w/979/format/webp)这是因为windows的安全策略禁用了当前目录下的命令解决方案如下1、在系统中 搜索框 输入 PowerShell 或者 右击任务栏的电脑图标，找到 Windows PowerShell（管理员）；2、点击“管理员身份运行”；3、输入 set-ExecutionPolicy RemoteSigned 回车；4、根据提示内容，输入A跳过后面的步骤确认，回车等待执行结束;5、重启控制台 输入 cnpm --version 执行就可以成功了。
-
使用ua-parser库处理userAgent判断微信授权登录支持的浏览器 平时我们在js中判断浏览器名称和版本都是通过解析userAgent字符串来判断，但是自己挨着用字符串判断始终不能保证处理的准确性，这种时候就可以考虑找找社区有没有比较成熟的解析库了，成熟的库优势就是经过比较漫长的迭代沉淀，且根据用户反馈做了更多的优化调整。对于ua解析库，比较成熟的就是 ua-parser 了，ua-parser 有很多语言版本，支持 python php golang 等，前端直接使用 ua-parser-js 就可以了import UAParser from 'ua-parser-js'; const WECHAT_SUPPORT_DEVICE = [ { // 微信内 webview browser: 'wechat', }, { // uc浏览器 browser: 'ucbrowser', }, { // qq 浏览器 browser: 'qqbrowser', }, { // ios safari 浏览器 browser: 'mobile safari', os: 'ios', }, ]; function isWechatSupportDevice(): boolean { const parser = new UAParser(navigator.userAgent); // you need to pass the user-agent for nodejs const parserResults = parser.getBrowser(); const browserName = parserResults.name; console.log(browserName); const isValid = WECHAT_SUPPORT_DEVICE.some((item) => item.browser === browserName.toLowerCase()); return isValid; },
-
GitHub 代码库收藏 地址：https://github.com/drawdb-io/drawdb在线数据库设计，可罗拉拽设计数据表的字段，索引，关联关系等地址：https://github.com/trekhleb/javascript-algorithms算法和数据结构是软件开发的支柱。顾名思义，这个代码库中包含许多流行算法和数据结构的 JavaScript 示例。每个算法和数据结构都有单独的 README 文件，其中包含相关的说明以及进一步的参考资料。这个代码库的 Star 数超过 15.5 万个，也是 GitHub 上 Star 数最多的代码库之一。地址：https://github.com/airbnb/javascript这个代码库来自 Airbnb。编程是一门艺术，而开发人员是艺术家，没有艺术家想把作品搞得一塌糊涂。这个代码库中提供了你可以在编程过程中遵循的最佳实践，GitHub 上的 Star 数超过 12.9 万个。地址：https://github.com/ryanmcdermott/clean-code-javascript" 代码的整洁性 " 是 Robert C. Martin 的著作《代码整洁之道》（Clean-code） 中提出的最著名的软件工程原则之一。这个代码库是 JavaScript 版的《代码整洁之道》，是使用 JavaScript 编写可读、可重用和可重构软件的指南，GitHub 上的 Star 数为 7.5 万个。地址：https://github.com/lydiahallie/javascript-questions这个代码库包含大量（高级）JavaScript 问题及其说明。你可以通过这个代码库测试一下自己的 JavaScript 水平，复习一下 JavaScript 知识，或者为编程面试做准备。GitHub 上的 Star 数为 4.95 万个。地址：https://github.com/leonardomso/33-js-concepts这个代码库旨在帮助开发人员掌握 JavaScript 中的概念。虽然学习这些概念不是必须的，但对未来的学习有很多裨益。这个代码库在 GitHub 上 Star 数为 5.3 万。地址：https://github.com/elsewhencode/project-guidelines虽然开发新项目令人激动万分，但对维护人员来说是一个潜在的噩梦。这个代码库包含一系列 JavaScript 项目的最佳实践。这个代码库在 GitHub 上有 2.75 万个 Star。地址：https://github.com/30-seconds/30-seconds-of-code这个代码库收集了各种 ES6 辅助函数的 JavaScript 片段，包含有关如何处理原语、数组和对象的说明，以及算法、DOM 操作函数和 Node.js 实用程序。GitHub 上的 Star 数为 10.5 万个。
-
前端常用框架或库收集整理 前端常用框架或库收集整理webcomponenthybrids webcomponent 组件定义库，api简洁好用 https://www.npmjs.com/package/hybridsReact 常用组件react-use 常用的自定义 hooks 合集react-hook-form 最常用 react 表单处理hooks，用来做表单验证处理，提交等react-cool-img react图片懒加载react-cool-inview react元素块内容进入页面可视区域监听组件，类似于react-dnd 拖放效果组件react-sortable-tree 可以排序的树形组件@uiw/react-md-editor md 编辑器，可以自定义控件，如上传等shepherdjs 网站新手引导框架 也有react 组件 https://shepherdjs.dev/docs/react-files-uploading react 文件上传组件 https://www.npmjs.com/package/react-files-uploadingreact-images-uploading react 图片上传组件 https://www.npmjs.com/package/react-images-uploadingreact-intersection-observer react 图片和dom懒加载 https://github.com/thebuilder/react-intersection-observerreact-share 网站分享快速生成按钮和图表的组件鼠标特效库 https://cursify.vercel.app/components/spotlight-cursorNodeJscheerio 用jquery语法来解读提取html文本内容的爬虫内容分析库ora 命令行loading工具consola 命令行人机交互输入工具，可以异步执行多个输入，单选，多选，确认 操作commander 命令行工具，注册命令，指定命令的说明，可选参数，以及要执行的代码，一般配合上面的 consola 来实现命令行工具sharp 图片合成和处理工具，可以修改图片大小，滤镜，网图片上加文字，图片等UI 组件库ElementUI vue 框架使用最多的组件库Framework7 支持所有主流前端框架，三端都有组件库JS 绘图jsplumb 拓扑图绘制框架fabricjs canvas库，支持画图，绑定操作，事件等，让canvas变简单ECharts 不用多说，无人不知，无人不晓Cytoscape.js 主要用来画连线图，如关系图谱JS 动画Tween.js 一个简单的 JavaScript 补间（比如css3的ease-in）动画库Snap.svg 绘制svg的类库，超级简单方便的apiAnime.js 类似jquery和jquery-ui的动画库，直接操作domwaypoint.js jquery监听dom进入浏览器可是窗口区域插件parallax.js 视距差效果JS工具函数html-to-text 将html内容转换成纯文本去除富文本内容字符串格式处理工具，支持多层级处理驼峰，下划线，大驼峰等的转换 https://www.npmjs.com/package/humps音视频相关webm-muxer/mp4-muxer 音视频录制并生成视频工具库 https://www.npmjs.com/package/webm-muxerjs-audio-recorder https://www.npmjs.com/package/js-audio-recorder 音频录制，支持录制时的声波显示等，非常强大代码编辑器Ace editor Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。作为与codemirror同类的现代编辑器，ACE同样拥有mode进行语法解析，实现编辑器的智能感知型功能。CodeMirror 是一个用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并附带一些实现更高级编辑功能的语言模式和插件。其核心仅提供编辑器功能，其他功能通过丰富的API和插件实现。CodeMirror的使用基于特定的程序语言模式(mode)，它对特定的语言进行语法解析(parse)，使编辑器能够在解析结果基础上进行语法高亮，实现具有上下文感知(context-aware)的代码补全、缩进等功能。monaco editor monaco是VS Code的代码编辑器，同时也是一个开源代码编辑器，可以嵌入到Web应用程序中社区整理常用库10个按钮特效 http://www.adobeedu.com/%E8%BF%9910%E4%B8%AA%E6%8C%89%E9%92%AE%EF%BC%8C%E6%8A%8A-css-hover-%E7%9A%84%E5%88%9B%E6%84%8F%E5%8F%91%E6%8C%A5%E5%88%B0%E6%9E%81%E8%87%B4%E4%BA%86/HTML5+CSS3 最酷的 loading 效果收集 https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html
-
webpack5.x+React18搭建移动端项目 webpack5.x+React18搭建移动端项目项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic在项目开发中，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展本项目基于公司内一个移动端项目搭建，旨在搭建一个快速，高效，灵活的前端开发环境。项目中使用了最新版本的webpack构建工具，最新版本的react前段框架和react-router6.x特性搭建，通过本项目，可以可以熟悉和巩固以下基础技能webpack5构建原理和基本配置，以及打包性能的提升和使用方法react18的feature，如，根组件的创建方式等const root = createRoot(document.getElementById('root') as Element); root.render(<RouterProvider router={router} />);react-router6 的新特性和单文件路由的使用方式wecpack5 中配置移动端响应式方案 rem布局的方法其他webpack插件和loader的使用项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic接下来，详细说明项目中的各个配置环境webpack5的一个重要特性，会根据配置的mode属性是develop还是production来判断是否需要开启构建优化，这个优化过程是指对构建产品的优化，如js uglify,压缩，tree-shaking 等等，所以，我们的开发环境，是可以不用用到那些优化操作的，那么就需要把mode指定成 develop 这样可以在我们保存代码后，获得更快的热更新速度，我这里为了简单，直接在npm script中制定env，在webpack.js中使用package.json 中的scripts"scripts": { "serve": "cross-env NODE_ENV=development webpack serve --config webpack.config.js", "dev": "npm run serve", },PS: 切忌在NODE_ENV=development顺手写上&&写上了就设置不上了webpack.config.js 中使用环境变量const isDev = process.env.NODE_ENV === 'development'; mode: isDev ? 'development' : 'production',基础配置1、entry入口，配置webpack构建的入口文件我这里使用了package.json 中的name属性的值作为主文件的名称entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), },2、output 制定输出文件路径和文件名output: { // 开发环境不使用hash文件名 filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, // 输出文件前会先清空目标目录的文件 },3、stats 指定webpack在控制台的输出内容stats: { all: false, assets: true, errors: true, assetsSort: '!size', // 按照文件大小倒序 entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', },4、devServer 配置本地开发服务器，如端口，代理等，此处不做详细说明，5、devtool 制定sourcemap文件生成方式devtool: isDev ? 'inline-source-map' : 'source-map', // 开发环境直接打包到js文件中，现网环境打包到独立文件，我的处理方式是在自动化部署工具中将sourcemap文件保存到特定地方，线上排查的时候使用6、resolve 配置6-1 extensions 指定webpack需要处理的文件扩展名类型6-2 alias 路径别名，注意要去 tsconfig 中相应配置，否则代码中会报ts错误项目使用的loader处理module说明ts-loader 处理typescript 语法以及es6特性（包含了babel-loader）style-loader 处理样式资源到html中，开发环境使用MiniCssExtractPlugin.loader 处理样式资源到单独的样式文件中，生产环境使用css-loader 让我们可以在js(x)或者ts(x)中使用import语句导入样式文件 如 import ‘./style.less’postcss-loader 对css进行编译处理，本项目主要用来处理 px2rem 将我们的样式中的px转为rem（只能针对import导入的样式文件，行内样式不生效）less-loader less编译为cssurl-loader 处理图片和字体等资源，小于limit则编码，大于则处理路径，包含了 file-loader（file-loader 主要作用是使我们可以在js(x)或者ts(x)中使用import语句导入静态资源文件 import ‘./xxx.png’）使用到的plugins做打包后处理说明copy-webpack-plugin 拷贝 public下的静态资源到 dist 目录clean-webpack-plugin 清理打包目标目录，防止重复文件WebpackBar 美化打包进度显示的插件HtmlWebpackPlugin 处理我们的构建产物到指定的html中，重中之重MiniCssExtractPlugin 压缩我们的css文件，只在生产环境使用好了，有了上面的介绍，就可以直接看我们的webpack配置文件了主webpack.config.js// @ts-nocheck const path = require('path'); const tsImportPluginFactory = require('ts-import-plugin'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const smp = new SpeedMeasurePlugin(); const fs = require('fs'); const packageJson = require('./package.json'); const optimization = require('./webpack-configs/optimization'); const config = require('./webpack-configs/config'); const plugins = require('./webpack-configs/plugins'); const isDev = process.env.NODE_ENV === 'development'; const SMP_SWICTH = false; console.log('-------当前环境-------', process.env.NODE_ENV); const wrapConfig = (isDev && SMP_SWICTH) ? smp.wrap : (config) => config; module.exports = wrapConfig({ target: 'web', mode: isDev ? 'development' : 'production', entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), }, output: { filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, }, // infrastructureLogging: { // level: 'error' // }, stats: { all: false, assets: true, errors: true, assetsSort: '!size', entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', }, devServer: { ...config.dev, historyApiFallback: true, // static: { // directory: path.join(__dirname, './public'), // }, watchFiles: './src/**/*', }, devtool: isDev ? 'inline-source-map' : 'source-map', resolve: { alias: { '@src': path.resolve(__dirname, './src'), '@tea/app': path.resolve(__dirname, './app'), }, extensions: ['.ts', '.tsx', '.js', 'less'], }, module: { rules: [ { test: /\.(jsx|tsx|js|ts)$/, loader: 'ts-loader', options: { transpileOnly: true, getCustomTransformers: () => ({ before: [ tsImportPluginFactory([ { style: false, libraryName: 'lodash', libraryDirectory: null, camel2DashComponentName: false, }, { style: true }, ]), ], }), compilerOptions: { module: 'esnext', }, }, exclude: /node_modules/, }, { test: /\.(le|c)ss$/, use: [ isDev ? 'style-loader' : MiniCssExtractPlugin.loader, // 现网环境才提取css到一个文件中 { loader: 'css-loader', // 使用import语句导入样式 }, { loader: "postcss-loader", options: { postcssOptions: { config: './postcss.config.js', }, sourceMap: true, } }, { loader: 'less-loader', // 转less为css options: { lessOptions: { modifyVars: { '@body-background': '#f5f5f5', }, javascriptEnabled: true, }, }, }, // { // loader: 'style-resources-loader', // options: { // patterns: path.resolve(__dirname, './src/styles/common.less'), // 全局引入公共的scss 文件 // }, // }, ], }, { test: /\.(png|jp(e)?g|gif|woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'url-loader', // 处理图片和字体等资源，小于limit则编码，大于则处理路径，包含了 file-loader options: { limit: 8192, }, }, ], }, ], }, watchOptions: { // 设置不监听的⽂件或⽂件夹，默认为空 ignored: /node_modules/, // ⽂件改变不会⽴即执⾏，⽽是会等待300ms之后再去执⾏ aggregateTimeout: 300, // 原理是轮询系统⽂件有⽆变化再去更新的，默认1秒钟轮询1000次 poll: 1000, }, plugins, optimization: !isDev ? optimization : {}, }); 在根目录下的wenpack-configs 目录中的下面三个拆出来的jswebpack 插件配置 plugins.jsconst path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const WebpackBar = require('webpackbar'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const chalk = require('chalk'); const webpack = require('webpack'); const isDev = process.env.NODE_ENV === 'development'; const config = require('./config'); module.exports = [ new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, '../public/px2rem-hike.js') } ], }), new CleanWebpackPlugin({ dry: false, // 是否打印删除的内容 }), // 热更新替换 new webpack.HotModuleReplacementPlugin(), // @ts-ignore new WebpackBar({ name: '能碳工场移动端h5', color: '#0049b0', // 默认green，进度条颜色支持HEX basic: true, // 默认true，启用一个简单的日志报告器 reporter: { change() { console.log(chalk.blue.bold('文件修改，重新编译...')); }, afterAllDone(context) { console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 编译完成')); isDev && console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 开发预览地址：http://127.0.0.1:' + config.dev.port)) }, }, }), new HtmlWebpackPlugin({ minify: false, chunks: 'all', template: path.resolve(__dirname, '../public/index.html'), filename: 'index.html' }), new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|ja|ko/), ].concat(isDev ? [] : [new MiniCssExtractPlugin({ filename: '[name].[hash].css', })])webpack优化配置 optimization.jsconst CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { minimize: true, minimizer: [ new CssMinimizerPlugin(), '...' // 压缩css 和 js ], splitChunks: { chunks: 'async', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, }; 其他常用需要修改配置 config.jsmodule.exports = { dev: { host: '0.0.0.0', port: 10010, hot: true, open: false, client: { overlay: { errors: true, warnings: false, }, }, proxy: { '/api': { // logLevel: 'debug', changeOrigin: true, pathRewrite: { '^/api': '' }, target: 'http://30.168.123.79', }, }, } };
-
[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突 当我们使用webpack5.x打包项目时，在现网环境需要使用mini-css-extract-plugin将我们的样式打包到独立的样式文件中，使用官方推荐配置能正常运行const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // all options are optional filename: "[name].css", chunkFilename: "[id].css", ignoreOrder: false, // Enable to remove warnings about conflicting order }), ], module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // you can specify a publicPath here // by default it uses publicPath in webpackOptions.output publicPath: "../", }, }, "css-loader", ], }, ], }, };但是当我们同时使用了 speed-measure-webpack-plugin 插件来打印各个module的打包时间时，就会出现无法正常打包的情况，报错信息如下：Webpack 5 fails as soon as I smp.wrap() my config, with the following error: ERROR in ..../Error.scss Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js): Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started at Object.pitch (.../node_modules/mini-css-extract-plugin/dist/loader.js:50:14)这时候我们需要去判断下，再不需要输出打包时间的情况下，不使用 smp 插件，如，我的方式const wrapConfig = isDev ? smp.wrap : (config) => config; module.exports = wrapConfig({ })
![[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突](https://blog.fastmock.site/usr/themes/Joe-master/assets/thumb/18.jpg)