ToB企服应用市场:ToB评测及商务社交产业平台

标题: Webpack学习条记（6） [打印本页]

作者: 商道如狼道 时间: 2024-12-27 07:30
标题: 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 ‘备注’ 会实现代码检查

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)