![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端技术学习
文章平均质量分 57
知行易
这个作者很懒,什么都没留下…
展开
-
Webpack的Source Map
1.生成环境遇到的问题 前端项目在投入生产环境之前,都需要对JavaScript源代码进行压缩混淆,从而减小文件的体积,提高文件的加载效率。 其中,会不可避免的一些问题: 对压缩混淆之后的代码除错(debug) 变量被替换成没有任何语义的名称 空行和注释被剔除 2.什么是Source Map Source Map就是一个信息文件,里面存储着位置信息。也就是说,Source Map文件中存储着代码压缩混淆前后的对应关系。 有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够原创 2021-10-16 20:18:53 · 338 阅读 · 0 评论 -
webpack的打包发布
1.为什么要打包发布? 项目开发完成后,使用webpack对项目进行打包发布的主要原因有以下两点: 开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件 开发环境下,打包生成的文件不会进行代码压缩和性能优化 2.配置webpack的打包发布 在package.json文件的scripts节点下,新增build命令如下: "scripts":{ "dev":"webpack serve",//开发环境中,运行dev命令 "build":"webpack --mode pro原创 2021-10-16 20:13:50 · 296 阅读 · 0 评论 -
webpack的loader加载器
1.loader概述 在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会出错。 loader加载器的作用:协助webpack打包处理特定的文件模块。 比如: css-loader可以打包处理.css相关的文件 less-loader可以打包处理.less相关的文件 babel-loader可以打包处理webpack无法处理的高级js语法。 2.loader调用过程原创 2021-10-16 20:12:58 · 328 阅读 · 0 评论 -
webpack的基本使用
webpack的基本使用 经过学习,我总结了webpack的基本使用流程如下: 1.什么是webpack 概念:webpack是前端项目工程化的具体解决方案。 主要功能:他提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端Javascript的兼容性、性能优化等强大的功能。 好处:让程序猿把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。 注意点:目前企业级的前端项目开发中,绝大多数的项目都是基于webpack进行打包构建的。 2.创建列表隔行变色项目 1).新建项目空目原创 2021-10-16 17:24:50 · 136 阅读 · 0 评论 -
前端工程化概念
在学VUE和webpack打包的时候,了解到前端工程的基本概念,如下: 实际的前端开发,遵循四个现代化: 1.模块化(js的模块化、css的模块化、其他资源的模块化) 2.组件化(复用现有的UI结构、样式、行为) 3.规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理) 4.自动化(自动化构建、自动部署、自动化测试) 概念 前端工程化指的是:再企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。 最终落实到细节上,就是实现前端的“4个现代化”。 好处原创 2021-10-16 17:20:28 · 483 阅读 · 0 评论