Webpack学习笔记(6)

首先搭建一个基本的webpack环境:

执行npm init -y,创建pack.json,保存安装包的一些信息

执行npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D,出现node_modules和package-lock.json。

1.source-Map(dev-tool)

  • 开发环境建议使用cheap-module-source-map;
  • 生产环境下不建议使用source-map;

2.devServer

在开发环境下启动一个web服务,模拟一个用户从浏览器访问我们web服务器的样子,可以读取我们打包的产物,webpack内置了这个功能。

3.模块热替换与热加载(提高调试效率)

模块热替换:在应用程序运行过程中,替换、添加或删除模块,无需重新加载整个页面。

模块热加载:在修改一个模块时,webpack会帮助我们自动刷新浏览器。

js文件需要手工打开热替换:

像vue、react会默认增加,不需要手动增加。

4.Eslint

eslint是用来扫描我们所写的代码是否符合规范的工具,往往项目是多人协作的,期望使用统一的代码规范,否则每个人的代码规范都不一样,可能会产生错误。

npm init -y创建一个package.json

npm install eslint -D

npx eslint --init配置后生成.eslintrc.json

  • env:脚本的运行环境;
  • extends:配置了airbnb-base扩展,帮助我们检查代码格式;
  • parserOptions:ecmaVersion版本12
  • rules:配置一写规则;
  • globals:执行脚本期间,访问额外的全局变量,不在这个环境中定义的变量。

安装扩展eslint可以检查哪个位置不满足eslint。

5.git-hooks与husky7

为了保证代码符合规范,我们往往想要在提交到git仓库时再去校验,使用husky来实现。

创建一个文件.gitgnore,在这个文件下定义在提交git时不需要提交的,比如node_modules

**/node_modules

git status当前git的状态

cd .git

ls -la

cd hooks

ls -la

.sample文件都是git的hook,hook就是在执行git之前或之后需要运行的一些命令

若我们想要在提交git之前运行一下eslint校验代码,可以在pre-commit.sample这个hook钩子中配置:

cat pre-commit.sample

重新创建:touch pre-commit

ls -la

vim pre-commit,按i插入,写入npx eslint ./src按esc+:wq退出

在运行git时会进行校验。

若把配置放在.git中每个人都不一样,所以需要把配置放在根目录下才有效。

git config core.hooksPath .mygithooks

chmod +x .mygithooks/pre-commit,增加写的权限。

使用husky

安装husky:npm install husky -D

npx husky install生成.husky文件夹

package.json配脚本:

在.husky文件下新建一个pre-commit写一句npx eslint ./src

增加权限:chmod +x .husky/pre-commit

git add. git commit -m '备注' 会实现代码检查

相关推荐
听风ツ1 小时前
固高运动控制
学习
西岭千秋雪_1 小时前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
XvnNing1 小时前
【Verilog硬件语言学习笔记4】FPGA串口通信
笔记·学习·fpga开发
海棠蚀omo1 小时前
C++笔记-位图和布隆过滤器
开发语言·c++·笔记
大胡子大叔1 小时前
webrtc-streamer视频流播放(rstp协议h264笔记)
笔记·webrtc·rtsp·webrtc-streamer
牛奶咖啡132 小时前
学习设计模式《十六》——策略模式
学习·设计模式·策略模式·认识策略模式·策略模式的优缺点·何时选用策略模式·策略模式的使用示例
The_cute_cat2 小时前
JavaScript的初步学习
开发语言·javascript·学习
山野万里__3 小时前
C++与Java内存共享技术:跨平台与跨语言实现指南
android·java·c++·笔记
Binary_ey3 小时前
超表面重构卡塞格林望远镜 | 从传统架构到新型光学系统
学习·软件需求·光学软件·超表面
roman_日积跬步-终至千里4 小时前
【学习线路】机器学习线路概述与内容关键点说明
人工智能·学习·机器学习