携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

本文只是简单叙述，具体还得看官网学习webpack.docschina.org/

初见Webpack5

1.版本历史

2012.3—webpack（问世）
2014.2—webpack1
2016.12—webpack2
2017.6—webpack3
2018.2—webpack4
2020.10—webpack5（要求node版本10.13+）

2.定义

webpack 是⼀个⽤于现代 JavaScript 应⽤程序的静态模块打包⼯具

• 静态模块
  模块化开发，避免重复代码、 逻辑，提⾼开发效率
• 打包
  将各个模块，按照⼀定的规则组装起来

3.特点：

• 构建
  将不⽀持的代码转换成⽀持的代码，源代码编译成浏览器能解析的⽣产代码（如：es6=>es5，scss=>css），格式化校验，压缩

• 打包
  把多个⽂件合并成⼀个⽂件，减少http请求的次数，提⾼⽣产环境的运⾏效率

• 发布 web 服务(热更新) ⽣成本地的服务器，监听开发代码的修改，⾃动更新⻚⾯的显示

4.功能

• 将多个不同类型⽂件打包
• 编译代码，确保浏览器能解析
• 对代码进⾏压缩，减少⽂件体积，提⾼加载速度对源代码进⾏格式化校验
• 有热更新功能，提⾼开发效率
• 不同环境，提供不同的打包策略

5.Webpack五个核⼼配置

• ⼊⼝（Entry）

使⽤哪个模块来作为构建整个项⽬的开始

• 出⼝（Output）

在哪⾥输出它所创建的 bundle ，以及如何命名这些⽂件（默认为 main.js ）

• 加载器（Loader）
  webpack 只能理解 JS 和 JSON ⽂件，loader 让 webpack 能够去处理其他类型的⽂件，并将它们转换为有效模块，以供应⽤程序使⽤

例⼦：css-loader | html-loader

• 插件（Plugins）

插件是 webpack 的⽀柱功能，能够执⾏范围更⼴的任务，包括：打包优化、压缩、重新定义环境中的变量等

例⼦： html-webpack-plugin

• 模式（Mode）

区分环境，不同的环境打包逻辑不同
(1)development （优化打包速度，提供调试的辅助功能）
(2)production （优化打包结果，打包之后代码的运⾏效率和性能优化）
(3)none （最原始的打包）\