webpack前端应用之基础打包

目录

前言：初识 Webpack 5

一、前端工程化

1、webpack

​ （2）主要功能：

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

3、示例

        强调：

4、webpack中使用的loader

二、webpack配置详解

---

前言：初识 Webpack 5

        webpack 是一个静态资源的打包工具，会以一个或多个文件为入口，将这一个或多个文件直接或间接使用到的所有文件，组合成一个或多个文件输出。输出的文件就是编译好的文件，通常称其为 bundle，可以在浏览器上运行。Webpack 本身能力有限，在不添加 loader、plugin等扩展时能力有限。

        Webpack 能让前端具有 模块化 和 工程化。

一、前端工程化

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、v