这是我参与「第四届青训营 」笔记创作活动的第2天
什么是Webpack？
百度百科：webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
所以webpack最简单的解释: 就是前端模块化打包工具。
主要功能
其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。
运行环境
webpack 5 运行于 Node.js v10.13.0+ 的版本。
静态模块打包器(module bundler)
静态资源处理(性能优化)：Webpack可以通过loader或者插件来对我们的静态资源进行优化，主要体现在对代码压缩，图片压缩，文件处理，css预处理等。
提升工作效率:Webpack 有一系列的辅助开发工具来提高我们的开发效率。本地服务中的热加载、less,sass的使用、开发环境到生产环境的自定义配置等。
因此通过Webpack主要处理方向就能理解静态的意义,
如何使用Webpack
- 安装
1.npm i -D Webpack-cli
- 编辑配置文件
- 执行编译命令
1 npx webpack
webpack.config.js 文件的作用
webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会 先读取这个配置文件 ， 从而基于给定的配置，对项目进行打包。
webpack 中的默认约定
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定： ① 默认的打包入口文件为 src -> index.js ② 默认的输出文件路径为 dist -> main.js 注意：可以在 webpack.config.js 中修改打包的默认约定 webpack 的基本使用
- 在 webpack.config.js 配置文件中，通过 entry 节点 指定 打包的入口 。通过 output 节点 指定 打包的出口 。
