webpack5配置babel-loader报错的解决方法
摘要：如果你在webpack配置babel-loader时出现如下报错 上面报错直接用谷歌在线翻译内容 解决方法 首先检查你webpack的版本是4，还是5，经本人测试，上面报错可能会在webpack5中配置babel-loader时出现， 下面代码意思为只要检测到后缀为js的文件，就使用babel-lo
阅读全文
yarn的安装和常用命令
摘要：前言 yarn是什么？ 简单来说是和npm一样的包管理工具，并对npm的一些弊端提供了优化和解决方案 yarn和npm的区别？ 安装速度更快，缓存了每个下载过的包，再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率， 运行代码前会校验每个安装包的完整性和统一性，使其在不同系统上也能无差别的
阅读全文
webpack4打包失败提示node sass找不到你当前环境绑定的解决方法
摘要：前言 最近使用webpack4打包出现了下图报错，提示模块构建失败，Node Sass找不到你当前环境的绑定。 起初我怀疑是node版本较高，导致node sass不兼容而报错。后来发现不是这个原因，谷歌折腾了很久，终于被我试出了解决方法 解决方法 重新安装一次node-sass npm insta
阅读全文
webpack如何配置打包多个文件
摘要：前言 一般webpack默认打包后生成的js文件名叫main.js 若设置filename属性，可更改默认打包出的文件名，比如下面打包出来的文件名是bundle.js 下面2种写法等价 场景 如果现在有这样一个需求，把index.js文件打包2次，第一个文件叫main.js，第二个文件叫bundle
阅读全文
clean-webpack-plugin插件的CleanWebpackPlugin is not a constructor报错解决方法
摘要：clean-webpack-plugin是什么？ webpack一个非官方的第三方插件 clean-webpack-plugin作用是什么？ 当打包生成一个js文件（比如bundle.js），若想更改打包后生成的bundle.js文件名字，比如改成main.js， 此时，虽然打包后会生成main.j
阅读全文
webpack plugin插件—HtmlWebpackPlugin
摘要：前言 首先，我们来简单了解一下，plugin和HtmlWebpackPlugin是什么？ plugin：可以在webpack运行到某个节点的时候，帮你做一些事，用过vue的小伙伴可以简单理解为类似vue生命周期函数 HtmlWebpackPlugin：webpack的一个插件，能自动帮你在dist目
阅读全文
css module到底解决了一个什么问题
摘要：css module解决了什么问题？ 简单来说，让你通过import引入css到项目后，只作用于当前模块，不作用于全局，避免造成样式的全局污染 2种写法 全局写法：import './index.scss'; （不推荐该写法，耦合强，容易覆盖其它模块的样式，不好维护） 局部写法：import sty
阅读全文
webpack4怎么使用loader对样式资源打包
摘要：webpack使用loader不仅能打包图片，js文件，还能打包css文件，只需使用style-loader和css-loader即可 注：官方推荐style-loader和css-loader配合使用，下面我会简单说明它们的作用以及联系 安装 npm install style-loader cs
阅读全文
webpack4怎么使用loader对图片资源打包
摘要：首先让我用一句话来概括webpack和loader到底是什么？ webpack：一个模块打包工具，不仅可打包js文件，还可以打包css文件，图片等资源 loader：专门用来打包那些webpack无法识别的非js后缀的模块，比如css，图片等模块 下面让我们通过2个实际需求来看看怎么使用loader
阅读全文
webpack4.0打包失败的探索
摘要：①：运行命令npx webpack index.js 打包index.js文件失败，如下图提示 度娘说是因为没有设置webpack为生产或开发模式，于是我在package.json文件中添加如下代码 "scripts": { "dev": "webpack –-mode development",
阅读全文
查询安装webpack4.0是否成功时提示无法找到的解决方法
摘要：最近使用webpack -v 查询webpack版本时提示无法找到 然后我试着重新全局安装webpack，提示还需要安装webpack-cli 选择yes后虽能成功安装webpack-cli，但会报错，提示找不到该模块 package.json也显示安装了webpack-cli 但当你在输入webp
阅读全文
本地运行vue项目webpack提示 Compiled successfully
摘要：最近在github下载运行别人的vue项目后，如下图提示编译成功，但项目并没有启动 最开始我以为是端口问题，修改了config-index.js里的port端口，重新运行后依然是上图提示 接着我怀疑是npm run dev命令出现了问题，一般默认项目启动命令是npm run dev，但启动命令本身可
阅读全文
git常用命令总结
摘要：git入门看廖雪峰大神的教程即可，通俗易懂 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 如果想看更精简小巧的，可以看这个，git简易教程 http://rogerdudler.
阅读全文
码云-怎么获取公钥
摘要：码云官网：https://gitee.com/（首先注册一个账号，这个可以理解为国产版github） 下面命令一定要在git bash里面输入，不要在windows doc里面输入，doc无法识别这些Linux的命令 ssh-keygen -t rsa -C "xxxxx@xxxxx.com" 首先
阅读全文
webpack-实用的2个配置
摘要：①：运行npm run dev 后自动打开浏览器 首先找到config里面的index.js文件，然后打开找到autoOpenBrowser属性，把默认的false改为true即可 ②：简写路径（比如把 ../src/pages/home/Home 改写为 @/pages/home/Home） 首先
阅读全文
前端日常调试代码的3种方式
摘要：在日常前端开发中，常常会遇到需要调试代码的场景，下面我总结了前端调试3板斧 ①：使用console.log()（推荐） 可在控制台打印出我们需要的数据，也可如下图直接在控制台输入console.log打印 ②：使用alert()（不推荐） 以弹框的形势展示出我们需要的数据 注：该方法为阻塞式，若不手
阅读全文
前端ps实用小技巧
摘要：下面总结了4个日常使用PS的小技巧，希望对大家有所帮助（重点推荐第一个小技巧） 场景一：用ps测量PSD图中的元素宽高大小时，一般手动使用 测量，但其实是有快捷键的，如下图 用移动工具选中元素相应图层，然后ctrl+t，会进入下图箭头所示模式（按esc取消该模式），同时信息面板会显示该元素宽高值 场
阅读全文
7步教你使用git命令上传本地代码至github仓库（小白向）
摘要：前言 1：首先你需要知道github和git分别是什么？（众所周知github是全球最大同性交友网站233333） github：国外一个免费托管代码的开源网站，每位注册用户都拥有专属的个人仓库（个人仓库可简单理解为QQ空间） git：目前最受欢迎的分布式版本控制系统（类似于SVN，更轻量，更方便，
阅读全文
Nginx报错-找不到路径
摘要：前言 最近在git bash里输入命令启动Nginx服务，总提示找不到路径，令我困惑不已 我反复检查安装路径和输入命令，确认无误 小技巧：复制路径可直接ctrl+c后在git bash里按一下鼠标滚轮即可粘贴 解决方法 后来发现是路径斜杠引起的，原来直接复制安装路径到git bash里默认是 '\'
阅读全文
git add -A （用该命令添加文件时报错）
摘要：前言 最近在学着不使用github客户端，而直接用git命令上传代码至github，当使用命令 git add -A 添加所有项目文件时报错 老实说我是蒙蔽的，因为从来没有遇到过这个错，确认输入命令无误后，我开始了漫长的搜索之旅 解决方法（建议除非下面①的命令无效，在使用②的命令） ①：使用该命令消
阅读全文