定义
前端项目是由很多资源文件组合而成，为了保证代码的正确运行，要考虑文件之间的引用关系，必须严格按照依赖顺序书写代码，除此之外，还有很多其他问题，大大影响开发效率。
为了解决这些问题，市面上出现了很多工具，如gulp、rollup、vite等，其中目前最具影响力、应用最为广泛的当属webpack。
webpack本质上是一种前端资源编译、打包工具。
如何使用
npm i -D webpack webpack-cli
webpack打包的核心流程——极度简化版
入口处理——从’entry’文件开始，启动编译流程
依赖解析——从’entry’文件开始，根据’require’ or 'import’等语句找到依赖资源
资源解析——根据’module’配置，调用资源转移器，将png、css等非标准js资源转译成js内容
资源合并打包——将转译后的资源内容合并打包为可直接在浏览器运行的js文件
.webpack.config.js:
lua
复制代码
entry是webpack的一个入口
output是weboack打包后文件所放置的位置。
使用Webpack：
处理CSS：通过安装和配置css-loader和style-loader，可以处理CSS文件的加载和样式注入。
接入Babel：借助babel-loader、@babel/core和@babel/preset-env，将ES6+代码转译为浏览器兼容的JavaScript。
生成HTML：使用html-webpack-plugin插件自动生成HTML文件，自动引入生成的Bundle。
工具类配置：
HMR（模块热替换） ：通过配置Webpack和webpack-dev-server，可以在开发环境实现模块热替换，避免整个页面刷新。
Tree-Shaking（树摇） ：通过在生产模式下启用Tree-Shaking，可消除未使用的代码，从而优化Bundle的大小。
Webpack在前端开发中发挥着重要作用，帮助开发者将各种资源整合、转译、优化，以实现更好的性能和用户体验。深入理解Webpack的原理和使用方法，有助于更高效地构建现代Web应用。同时，Webpack社区提供了丰富的插件和工具，可以根据项目需要进行定制和扩展。
