ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

前端工程化与webpack

前端工程化与webpack

1、实际开发中,不需要自己再配置webpack,实际开发中会使命令工具(CLI)一键生成带有webpack的项目。开箱即用,所有的webpack配置项目都是现成的。我们只需要知道webpack中的基本概念即可。
2、webpack帮助搭建项目的骨架。webpack中的插件。webpack中的loader。打包发布。Source Map。
3、实际的前端开发:

  • 模块化(js的模块化、css的模块化、资源的模块化)
  • 组件化(复用现有的UI结构、样式、行为)
  • 规范化(目录结构的规划、编码规范化、接口规范化、文档规范化、Git分支管理)
  • 自动化(自动化构建、自动部署、自动化测试)
    4、前端工程化指的是:在企业的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。企业中的Vue项目和React项目,都是基于工程化的方式进行开发的。好处是:前端开发自成体系,有一套标准的开发方案和流程。
    5、前端工程化的解决方案:webpack、parcel
    6、webpack是前端项目工程化的具体解决方案。它的主要功能是,提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JS的兼容性、性能优化等强大的功能。好处是:让程序员把工作重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。注意:目前Vue、React等前端项目,基本上都是基于webpack进行工程化开发的。
    一、webpack的基本使用
    (1)创建列表隔行变色项目
  1. 新建 项目空白目录,并运行npm init-y命令,初始化包管理配置文件package.json
  2. 新建src源代码目录
  3. 新建src->index.html首页和src->index.js脚本文件
  4. 初始化首页基本的结构
  5. 运行npm install jquery-S 命令,安装jQuery
  6. 通过ES6模块化的方式导入jQuery,实现列表隔行变色效果
返回列表