这是我参与「第五届青训营」伴学笔记创作活动的第17天
前言——为什么使用Webpack
早期的前端开发，用 HTML + CSS + JavaScript就可以了，把这些丢到浏览器中，浏览器就会显示出一个网页。
后期为了更快的进行前端的开发，产生许多库，如操作DOM的jquery，操作css的Less等，这个时候前端程序员是舒服了，可浏览器不认识了，它没学啊。
这时候就要利用一些工具将这些语言‘翻译’给浏览器，一个两个还好，当这些小工具多了的时候，不光维护麻烦，操作也麻烦，这时webpack诞生了。使用webpack来统一的管理这些编译小工具。可以理解为：由一个大工具管理一堆小工具，而我们只需要管理大工具就可以了。
Webpack是前端资源的构建工具，也是静态模块打包器。提供 压缩，合并，解决兼容问题
什么是Webpack
webpack 是静态模块打包器，当 webpack 处理应用程序时，会将所有这些模块打包成一个或多个文件。
Webpack = 前端资源构建工具+静态模块打包器
前端资源构建工具：就是把一些浏览器不支持的文件比如less，sass，转换成浏览器支持的css这样的工具。
静态模块打包器： 前端的所有资源文件(js/json/css/img/less/…)都会被webpack作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
Webpack打包核心流程
Entry => Dependencies Lookup => Transform => Bundle => Output
2.1 Entry
指定 webpack 打包的入口
2.2 Output
指定 webpack 打包资源的存放位置
2.3 Loader
让 webpack 能够处理非 JavaScript 文件 (webpack 自身只能处理JavaScript)
2.4 Plugins
可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。
2.5 mode
指定 webpack 当前的构建环境类型。设置mode可以自动触发webpack内置的函数，达到优化的效果。
development
会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
development打包后，一些没有依赖的方法 变量 文件会保留，production则会移除。
production
会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。
production打包后，代码会进行压缩，比development的文件小。
Webpack的基本使用
1、创建一个空项目文件夹——全英文名
2、进入当前文件的终端运行npm init -y，始化包管理配置文件，此时空文件夹内会自动生成一个package.json 文件。
3、在项目文件夹内新建src 文件夹，并在里面新建 index.html 首页 和 index.js 脚本文件
4、初始化html文件 【 vscode 快捷键（！+ tab）】，写上相关结构
5、在当前项目的终端终端运行 npm install jquery -S ，下载jquery，用于对页面结构进行快速操作。【-S 是 --save的缩写，将包信息写入package.json文件中的"dependencies"下】
6、在index.js 文件内通过 import $ from 'jquery' 导入jquery库【记得带 ‘ ’ 号】，并进行相关操作的编写，如实现单双列表的隔行变色。
7、此时在html的 头标签内 ，引入并运行是有问题的，因为浏览器不能识别 jquery 语法。因此列表的格式未发生变化
8、安装webpack，在项目终端运行以下命令，安装webpack相关的包文件
npm install webpack@5.73.0 webpack-cli@4.10.0 -D
9、在项目根目录中，创建名为webpack.config.js的配置文件，并初始化以下配置：
module.exports = {
mode: 'development'
}
//mode 用来构建模式的可选值有两个
// 1.development 开发环境，不会对打包生成的文件进行代码压缩和性能优化，且打包速度快，
// 适合在开发阶段使用。
// 2.production 生产环境，会对打包生成的文件进行代码压缩和性能优化，且打包速度很慢，
// 仅适合在项目发布阶段使用。
10、在package.json文件中的scripts节点下，新增脚本
"scripts": {
"dev": "webpack"
}
//dev只是个名称，可以根据自己的喜好更改
11、在项目终端运行 npm run dev
12、更改html中
Webpack用法参考文章为什么要用Webpack？
