文章目录
前端工程化与webpack
前端工程化
概念:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、检验等进行规范化、标准化。
好处:前端开发自成体系,有一套标准的开发方案和流程。
解决方案:webpack
webpack的基本使用
什么是webpack
概念:前端项目工程化具体解决方案
主要功能:提供友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器JavaScript的兼容性、性能优化等强大的功能。
注意:vue,react等前端项目,都是基于webpack进行工程化开发的。
创建列表隔行变色项目
项目中安装webpack:npm i webpack@5.42.1 webpack@4.7.4 -D
项目中配置webpack
-
项目根目录中,创建webpack.config…js的webpack配置文件,初始化基本配置:
module.exports = { mode:'development' // mode 用来指定构建模式,可选值有development和production // 开发用development,因为打包速度快 // 上线用production,因为上线追求体积小 }
-
在package.json的scripts节点下,新增Dev脚本;
“scripts”: { "dev":"webpack" }
-
终端中运行npm run dev,启动webpack进行项目奖的打包构建
webpack中的插件
webpack-dev-server
html-webpack-pligin
devServer节点
webpack中的loader
在实际开发中,webpack默认只能打包处理以.js后缀结尾的模块。其他非.js后缀结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错。
作用:协助webpack打包处理特定的文件模块。比如:
- css-loader可以打包处理.css想断的文件
- less-loader可以打包处理.less相关文件
- babel-loader可以打包处理webpack无法处理的高级JS语法
打包发布
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PG6Z47U1-1649426984476)(C:\Users\二蛋\AppData\Roaming\Typora\typora-user-images\image-20220313004254096.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhYxo2LO-1649426984477)(C:\Users\二蛋\AppData\Roaming\Typora\typora-user-images\image-20220313004507236.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k9RKA6EH-1649426984478)(C:\Users\二蛋\AppData\Roaming\Typora\typora-user-images\image-20220313004517903.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZFS8Dfz-1649426984478)(C:\Users\二蛋\AppData\Roaming\Typora\typora-user-images\image-20220313004535128.png)]
Source Map
概念:是一个信息文件,里面存储位置信息。也就是说,Source Map文件存储者压缩混淆后的diamante,所对应的转换钱的位置。能够极大的方便后期的调试。
Map
概念:是一个信息文件,里面存储位置信息。也就是说,Source Map文件存储者压缩混淆后的diamante,所对应的转换钱的位置。能够极大的方便后期的调试。