1.webpack
webpack是一个前端构建工具，就是把开发环境的代码转化成运行环境代码，将JS、CSS代码混淆压缩，让代码体积更小，加载更快。
2.创建一个简单的webpack
（1）创建文件夹webpack-demo
（2）在命令提示符中执行以下命令：
cd webpack-demo
npm init -y
npm i webpack webpack-cli -D（3）项目中创建src文件夹以及 index.html index.js index.cs
（4）项目中新建webpack.config.js，cmd中执行如下命令
npm i html-webpack-plugin -D
npm i css-loader -D
npm i style-loader -D（5）终端运行npm run build，则会产生一个dist文件，此时文件被打 包在dist中
3.entry入口文件
应用打包入口可以是一个，也可以是两个，单独打包出一个文件可以使用dependOn。
4.output输出构建产物
"构建产物输出" 通常用于描述在软件开发和构建过程中生成的可执行文件、库、资源文件等。这些产物通常是开发人员在开发软件时所期望的最终结果，用于部署、测试或运行软件。在不同的上下文中，构建产物的具体含义可能会有所不同。例如：
（1）编译过程：在编译过程中，源代码会被转换成机器代码或字节码，这些代码可以直接由计算机执行。编译器的输出就是构建产物。
（2）打包过程：当开发人员希望将他们的软件分发给其他人时，他们可能会使用打包工具（如Docker、NuGet、npm等）来创建一个可分发的包。这个包就是构建产物。
（3）持续集成/持续部署（CI/CD）流程：在CI/CD流程中，每次代码提交后，会自动触发一个构建过程。这个过程可能会编译代码、运行测试、打包应用程序等。最终的产物（如可执行文件、测试报告、部署包等）也是构建产物。
5.loader资源处理
5.1 loader用于处理和转换资源，例如JS、CSS、图片等，以便它们可以在浏览器中正确加载和执行。
（1）定义：在Webpack中，loader是一个或一系列的插件，用于转换资源文件。这些转换可以包括压缩、美化、图片压缩等。
（2）使用：在Webpack配置文件中，你可以指定哪些文件或模式应该通过特定的loader进行处理。
（3）自定义loader：除了Webpack提供的默认loader外，你还可以创建自己的loader来满足特定的需求。这通常涉及到编写一个Node.js模块，该模块使用Webpack的API来转换资源。
5.2 css-loader、style-loader和scss-loader
5.2.1 css-loader：CSS-Loader是Webpack中的一个插件，能够将CSS文件转化为JavaScript模块，以便在JS中使用。具体来说，CSS-Loader会将CSS文件中的样式代码解析为JavaScript对象，然后通过module.exports输出这个JavaScript对象。
5.2.2 style-loader：style-loader的作用是将解析后的css代码从js中抽离，放到头部的style标签中（在运行时做的）。简单来说，style-loader是将css-loader打包好的css代码以