前端工程化与webpack

前端工程化与webpack

前端工程化

概念：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、检验等进行规范化、标准化。

好处：前端开发自成体系，有一套标准的开发方案和流程。

解决方案：webpack

webpack的基本使用

什么是webpack

概念：前端项目工程化具体解决方案

主要功能：提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性、性能优化等强大的功能。

注意：vue，react等前端项目，都是基于webpack进行工程化开发的。

创建列表隔行变色项目

项目中安装webpack：npm i webpack@5.42.1 webpack@4.7.4 -D

项目中配置webpack

1. ​ 项目根目录中，创建webpack.config…js的webpack配置文件，初始化基本配置：

   module.exports = {
   	mode:'development' 
   	// mode 用来指定构建模式，可选值有development和production
   	// 开发用development，因为打包速度快
   	// 上线用production，因为上线追求体积小
   }
   

2. 在package.json的scripts节点下，新增Dev脚本;

   “scripts”: {
   	"dev":"webpack"
   }
   

3. 终端中运行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，所对应的转换钱的位置。能够极大的方便后期的调试。