首先搭建一个基本的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 '备注' 会实现代码检查