前端工程化

一、webpack

1、定义

        是一个前端的构建工具。前端代码格式多（html、css、js、图片），前端构建工具的作用是将各种格式不同文件打包到一起，方便项目的上线运行。（将开发环境的代码转换成运行环境的代码）开发环境的代码：便于阅读​ 运行环境的代码：能够更快的执行（通常会对代码进行压缩）。

2、主要功能

​ A、代码压缩：将js代码、css代码、静态的资源文件(图标、图像)等进行混合压缩，使代码的体积变小、加载速度更快

B、统一编译语法：css、less、sass，ES6语法、TypeScript语法等，语法要求不同在不同浏览器上运行时会出现问题，就需要使用构建工具进行统一编译

​ C、模块化处理：css、js都有自己的模块化处理方式，对于这些模块化的语法在不同浏览器上的兼容性很差，需要使用构建工具统一模块化的形式，提高兼容性

3、使用：配置文件所需要的信息（五大配置属性）

（1）entry（入口配置）：配置打包的入口文件（即从项目的哪个文件开始打包）

​ （2）output（输出配置）：配置打包后的文件，名称是什么、存储路径是什么

        ​ path：指明存储路径

         filenem：指定打包后的文件名

        ​ clean：指定打包前是否清空打包的输出目录

（3）Loaders（加载器）：webpack只能处理js、json等文件，若需要打包处理其他格式的文件（css、less、sass、vue、图片）时需要使用不同的loader（插件）辅助完成。若安装了不同的loader，需要在webpack的配置中通过module.rules进行配置

（4）plugins （插件）：扩展webpack的功能。如html插件

（5）mode（打包的模式）： webpack 有两种打包模式：生产模式 production 和 开发模式 development。两种模式都只能编译ES6中的模块（Module）语法。

二、使用webpack打包vue项目

1、使用vue-cli和webpack创建项目

（1）创建文件夹：demo

（2）进入demo文件夹，使用vue init webpack 项目名

2、在项目的根目录下创建webpack.config.js文件，进行相关的打包配置

3、执行npm run build指令进行打包

三、在WebStorm中安装vite插件，通过vite构建工具创建vue项目

1、vite构建工具的核心配置文件：vite.config.js

2、用vite创建vue项目时，默认vue版本是3.0的