【前端工程化】一.前端工程化；二.使用webpack打包vue项目；三.在webstorm中安装vite插件，通过vite构建工具创建vue项目

目录

一.前端工程化

1.webpack

（1）定义：是一个前端的构建工具。前端代码格式多（html、css、js、图片），前端构建工具的作用是将各种格式不同文件打包到一起，方便项目的上线运行。（将开发环境的代码转换成运行环境的代码）

（2）主要功能：

2.webpack的使用：配置文件所需要的信息

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

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

（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）语法。

3.示例

（1）创建文件夹：webpack-study

（2）进入文件夹，打开cmd窗口

（3）将该文件夹初始化为npm项目：npm init

（4）安装webpack开发依赖：npm install webpack webpack-cli -D

（5）项目的目录结构

（6）写代码

（7）在项目的根目录下创建webpack的配置文件：webpack.config.js

 （8）在package.json文件中配置打包指令

（9）运行打包指令（npm run build）进行打包

（10）将打包后的js文件导入页面文件（index.html）中

4.webpack中使用的loader

（1）url-loader：用来打包图像文件

（2）'style-loader', 'css-loader', 'less-loader'：用来打包样式文件

（3）babel-loader：打包js文件

（4）vue-loader：打包.vue文件

5.webpack中的plugins配置

二.使用webpack打包vue项目

1.使用vue-cil和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的

---

一.前端工程化

1.webpack

（1）定义：是一个前端的构建工具。前端代码格式多（html、css、js、图片），前端构建工具的作用是将各种格式不同文件打包到一起，方便项目的上线运行。（将开发环境的代码转换成运行环境的代码）

        开发环境的代码：便于阅读

        运行环境的代码：能够更快的执行（通常会对代码进行压缩）

（2）主要功能：

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

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

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

2.webpack的使用：配置文件所需要的信息

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

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

        path：指明存储路径

        filename：指定打包后的文件名

        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）语法。

3.示例

（1）创建文件夹：webpack-study

（2）进入文件夹，打开cmd窗口

（3）将该文件夹初始化为npm项目：npm init