什么是 Webpack ?
本 质：Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具。它主要用于将JavaScript、CSS、图片等静态资源打包成一个或多个 bundle 文件，并可以通过在浏览器中加载这些 bundle 文件来运行整个应用程序。
bundle文件：一个 bundle 文件是一个包含多个文件或目录的压缩文件。它被用于将相关文件捆绑在一起，方便传输、存储或分发。bundle 文件可以用于多种用途，例如软件安装包、资源包、模型文件等。常见的bundle 文件格式包括 ZIP、TAR、GZ 等。在某些操作系统或应用程序中，bundle 文件可能会被视为单个实体，用户可以像处理单个文件一样处理它。
- 支持所有类型的文件的打包
- 支持 less/sass => css
- 支持 ES5/7/8=>ES5
Webpack打包流程：
-
初始化包环境 yarn init
-
安装依赖包 yarn add webpack webpack-cli -D
-
配置 scripts (自定义命令) "scripts":{ "build":"webpack"}
Webpack 基础
-
入口 (entry): 指示 Webpack 应该从哪个文件开始构建依赖图，默认为
./src/index.js。可以通过配置文件来指定不同的入口文件。 -
出口(output): 指示 Webpack 应该将打包后的文件输出到哪个目录，并使用什么文件名。默认为
./dist/main.js。可以通过配置文件来指定不同的输出目录和文件名。 -
加载器(loaders): 用于对不同类型的文件进行处理和转换，例如将 ES6 代码转换为 ES5、将 SCSS 文件转换为 CSS 等。加载器可以在 Webpack 配置中进行配置。
-
插件(plugins): 用于执行更广泛的任务，例如优化打包结果、代码压缩、生成 HTML 文件等。插件可以在 Webpack 配置中进行配置。
-
模式(mode): 用于指定当前的构建环境，有两个可选值：
development和production。在开发环境下，Webpack 会开启一些辅助功能，例如热模块替换 (Hot Module Replacement) ，而在生产环境下，Webpack会进行优化和压缩，以提供更小的文件体积和更好的性能。 -
模块化：Webpack 支持使用 ES6 的
import/export语法来进行模块化开发，并且可以处理各种模块依赖关系，包括CSS、图片等静态资源。 -
代码拆分：Webpack 可以将代码拆分成多个 bundle 文件，实现按需加载，以提高应用程序的加载速度。
-
开发服务器：Webpack 提供了一个开发服务器，可以实时监听文件变化并自动重新构建应用程序，同时支持热模块替换，方便开发调试。
