为什么需要打包工具?
vue框架, ES6模块化标签, less/sass等代码想要在浏览器运行的时候必须通过编译成浏览器能识别的JS, Css等语法才能运行.
其他打包工具: vite, Gulp, Grunt等.
功能介绍
- 开发模式: 仅能编译JS中ES6模块
- 生产模式: 能编译JS中的ES6语法, 还能压缩代码.
处理图片资源:
webpack提供本身优化, 不需要下载额外插件.
module:{
rules:[
{
test:/\.(png|jpe?g|gif|webp|svg)$/,
type:"asset"
parser:{
dataUrlCondition:{
// 小于10kb的图片转base64
// 优点: 减少请求资源, 缺点: 体积会更大
maxSize:10 * 1024,
}
}
}
]
}
修改输出文件目录:
js在js目录中, 图片在图片目录中.
module:{
rules:[
{
test:/\.(png|jpe?g|gif|webp|svg)$/,
type:"asset"
parser:{
dataUrlCondition:{
// 小于10kb的图片转base64
// 优点: 减少请求资源, 缺点: 体积会更大
maxSize:10 * 1024,
}
},
generator:{
//输出图片名称
//[hash:10]取前10位
filename: "static/images/[hash:10][ext][query]"
}
]
}
自动清空上次打包的内容:
output:{
// 所有文件输出路径
// __dirname代表当前文件及目录
path:path.resolve(__dirname, "dist"),
// 入口文件打包输出文件名
filename:"static/js/main.js",
// 自动清空上次打包的内容
clean:true
}
eslint介绍:
: 检测js和jsx语法的工具, 可以配置各项情况.
写eslint配置文件, 里面写上各种rules规则, 将来运行eslint时就会以写的规则对代码进行检查.
配置文件:
- .eslint.js (创建新文件, 位于根目录)
- package.json中eslintConfig (不需要创建文件, 原有文件中写)
babel(编译工具!!)
js编译器, 将ES6语法编写的代码转化为向后兼容的js语法, 以便能够运行在当前和旧版本的浏览.