一、简介：webpack初始
1.1 版本历史：
- 2012.3 - webpack 问世
- 2014.2 - webpack1
- 2016.12 - webpack2
- 2017.6 - webpack3
- 2018.2 - webpack4
- 2020.10 - webpack5（要求node版本10.13+）
1.2 官网
webpack | webpack中文文档 | webpack中文网 (webpackjs.com)
1.3 定义（是什么）
- webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包 工具
- 静态模块：模块开发，避免重复代码、逻辑，提高开发效率
- 打包：将各个模块，按照一定的规则组装起来
1.4 特点
-
构建（不支持的代码转换成支持的代码）
- 源代码编译成浏览器解析的生产代码（如：ES6 => ES5, scss => css）
- 格式化校验
- 压缩
-
打包：把多个文件合并成一个文件，减少HTTP的请求，提高生产环境的运行效率
-
发布 web 服务：生成本地的服务器，监听开发代码的修改，自动更新页面的显示
1.5 功能
1. 将多个不同类型的文件打包
2. 编译代码，确保浏览器解析
3. 对代码进行压缩，减少文件体积，提高加载速度
4. 对源代码进行格式化校验
5. 有热更新功能，提高开发效率
6. 不同环境，提供不同的打包策略
二、五个核心配置
2.1 入口（Entry）
告诉webpack应该使用哪个模块和库，来作为构建项目的开始。
默认值是 ./src/index.js，但是可以在webpack config文件中配置 entry 属性，来指定一个或多个不同的入口
2.2 出口（Output）
告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
2.3 加载器（loader）
webpack 只能理解 JS 和 JSON 文件，loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。例如： css-loader 等
2.4 插件（plugins）
插件是 webpack 的支柱功能，能够执行范围更广的任务，包括：打包优化、压缩、重新定义环境中的变量等。例如：html-webpack-plugin
2.5 模式（Mode）
区分环境，不同环境打包逻辑不同
development: 优化打包速度，提供调试的辅助功能production：优化打包结果，打包之后代码的运行效率和性能优化none：最原始的打包
