安装各类依赖
webpack-dev-server
npm install webpack-dev-server --save-dev使用webpack-dev-server启动服务，检测本地修改，实现热更新。
cross-env
npm install cross-env --save-dev使用cross-env定义环境变量如NODE_ENV等，用作程序种环境的判断启用不同的逻辑
webpack-merge
npm install webpack-merge --save-dev使用webpack-merge的merge方法可以合并多个webpackconfig文件，分类管理config，便于开发者理解和拆分功能
babel
babel必须要引入三个包：
@babel/core：babel核心库，供babel-loader调用
@babel/preset-env：包含所有es6转化为es5的规则
@babel/polyfill：兼容低版本浏览器，转换promise对象和一些新的原生方法，需要在preset选项中使用"useBuiltIns": "usage"配置只转换使用到的语法打包到成果物中
//在webpackconfig中entry之前引入
{
entry: ['@babel/polyfill', 'index.js']
}babel-loader：代码转换loader
.babelrc配置： babel loader运行前会阅读该文件判断该如何转换代码
{
"presets": [
[
"@babel/preset-env",
{
"chrome": "58",
"ie": "11",
"edge": "16",
"firefox": "66",
"safari": "11"
},
{
"useBuiltIns": "usage"
}
]
],
"plugins": []
}可选：transform-runtime：不在全局挂载浏览器不兼容的功能，适合写库
clean-webpack-plugin
删除之前打包的版本，避免路径冲突
npm install --save-dev clean-webpack-plugincopy-webpack-plugin
npm install --save-dev copy-webpack-plugin拷贝文件到指定文件夹，打包后文件可以放在单独的打包收集文件夹中，避免与项目代码混合，方便管理
node-sass
npm install --save-dev node-sass使用提供scss语法，可以程序化结构化编写css代码
sass-loader
npm install --save-dev sass-loader配置sass的loader，编译sass文件为css文件
glob
npm install --save-dev glob简化多页面应用入口配置，可以直接使用glob方法直接生成entry
mini-css-extract-plugin
npm install mini-css-extract-plugin -D将所有的css是，scss抽取到一个文件中，可以结合webpack的splitChunks中按entry提取entryStyles
optimize-css-assets-webpack-plugin
npm install optimize-css-assets-webpack-plugin --save-dev压缩css代码
popper.js
npm i @popperjs/core --savepopper定位，便于写Hover框
purify-css
npm i -D purify-css自动检查没有使用的css并删除，可以配置某些link的css不精简，添加自定义属性
purifycss-webpack
npm i -D purifycss-webpack提供使用purify-css的插件和treeShaking(消除无用代码)
url-loader
npm install --save-dev url-loader文件大小低于指定的限制时，可以将图片文件转换为base64文件
style-loader
npm install --save-dev style-loader将js文件中引入的css文件通过style标签注入到html文件中
css-loader
npm install --save-dev css-loader解析各css文件的依赖关系
husky
npm install husky --save-devgit的生命周期工具，安装之后，自动在.git目录下增加相应的钩子，可以监听到git的各个生命周期，并配置对应的shell命令
配置eslint在commit之前自动检查一下代码
// package.json
{
"husky": {
"hooks": {
"pre-commit": "eslint src/**/*{.js,.vue}"
}
}
}lint-staged
只配置husky会导致不commit的文件不符合eslint时也会在提交时报错，这是需要这个包来配置只校验我们需要commit的文件
npm install lint-staged --save-dev
// package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue}": [
"eslint"
]
}
}patch-package
npm install patch-package --save-dev可以修改包文件，自主解决发布库中的性能样式等问题
npx patch-package zrenderpackage中配置
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.14.7",
"babel-loader": "^8.2.2",
"cross-env": "^7.0.3",
"css-loader": "^5.2.6",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"style-loader": "^3.0.0",
"url-loader": "^4.1.1",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@popperjs/core": "^2.9.2",
"node-sass": "^6.0.1",
"sass-loader": "^12.1.0"
}
