前端工程化和webpack

前言
一、前端工程化
二、webpack的基本使用

前言

最近也是再开始学习vue，因为web课程设计的需要，我们需要学习简单的html、css、JavaScript等，还有一些前端的比较热门的框架等，但是课程涉及的知识比较多，讲的也是比较浅，既然学习了，那么不如趁着有时间多学习一点，之后课程设计也是自己能实现尽量自己实现，所以记录一下学习的过程和笔记，便于之后复习使用。

一、前端工程化

1、小白眼中的前端开发 vs 实际的前端开发

小白眼中的前端开发：

会写HTML + CSS + JavaScript 就会前端开发
需要美化页面样式，就拽一个bootstrap 过来
需要操作DOM或发起Ajax 请求，再拽一个 jQuery 过来
需要快速实现网页布局效果，就拽一个Layui 过来

实际的前端开发：

模块化（js 的模块化、css 的模块化、资源的模块化）
组件化（复用现有的UI 结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
自动化（自动化构建、自动部署、自动化测试）

2、什么是前端工程化

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

企业中的Vue 项目和 React 项目，都是基于工程化的方式进行开发的。
好处：前端开发自成体系，有一套标准的开发方案和流程。

3、前端工程化的解决方案

早期的前端工程化解决方案：

grunt（https://www.gruntjs.net/ ）
gulp（https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解决方案：

webpack（https://www.webpackjs.com/ ）
parcel（https://zh.parceljs.org/ ）

二、webpack的基本使用

1、什么是webpack

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

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

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前Vue，React 等前端项目，基本上都是基于webpack 进行工程化开发的。

2、创建基本的项目

① 新建项目空白目录，并运行npm init –y 命令，初始化包管理配置文件package.json
在这里插入图片描述

② 新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
在这里插入图片描述

④ 初始化首页基本的结构
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个li</li>
        <li>这是第 2 个li</li>
        <li>这是第 3 个li</li>
        <li>这是第 4 个li</li>
        <li>这是第 5 个li</li>
        <li>这是第 6 个li</li>
        <li>这是第 7 个li</li>
        <li>这是第 8 个li</li>
        <li>这是第 9 个li</li>
    </ul>
</body>
</html>

index.js

// 1、使用es6导入语法，导入jquery
import $ from 'jquery'

// 2、定义jquery的入口函数
$(function() {
    
    
    // 3、实现奇偶行变色
    $('li:odd').css('background-color', 'blue')
    $('li:even').css('background-color', 'red')
})

这时我们可以打开页面，查看效果，如下：
在这里插入图片描述
发现index.js文件中的内容并没有被实现，打开控制台查看原因：

翻译之后就是：无法在模块外部使用import语句。
大致原因就是浏览器不能解析es6的高级语法。
所以我们需要使用webpack来实现这个效果。

⑤ 运行npm install jquery –S 命令，安装 jQuery
在这里插入图片描述

⑥ 通过 ES6 模块化的方式导入jQuery，实现列表隔行变色效果

要使用webpack来实现jQuery的读取，首先我们要安装webpack。

3、安装和配置webpack

npm install webpack@5.42.1 webpack-cli@4.9.0 -D

安装好之后，我们可以看到
在这里插入图片描述
① 在项目根目录中，创建名为webpack.config.js 的webpack 配置文件，并初始化如下的基本配置：

② 在 package.json 的 scripts 节点下，新增dev 脚本如下：

③ 在终端中运行npm run dev 命令，启动webpack 进行项目的打包构建。

4、补充

4.1 mode 的可选值

mode 节点的可选值有两个，分别是：
① development

开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用

② production

生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用

前端工程化和webpack基本使用