重庆网站建设cqsday中国站长之家官网

webpack是一个静态资源打包工具
开发时，我们会使用框架（Vue，React），ES6模块化语法，Less/Sass等css预处理器等语法进行开发。
这样的代码想要在浏览器运行必须经过编译成浏览器能识别的JS、CSS等语法，才能运行。
所以我们需要打包工具帮我们做完这些事情。
除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

1、前端模块化
前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发）
ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发
并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将其进行整合打包
此时出现webpack，其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
而不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。
2、打包如何理解？
webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就很好理解了。
就是将webpack中的各种资源模块进行打包合并成一个多个包（Bundle）
并且在打包的过程中，还可对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
输出的文件就是编译好的文件，就可以在浏览器中运行。
webpack输出的文件叫做bundle。

功能介绍
开发模式：仅能编译JS中的ES Module语法。
生产模式：能编译JS中的ES Module语法，还能压缩JS代码。

其他打包工具：
Grunt
Gulp
Parcel
Rollup
Vite