Webpack笔记

最新推荐文章于 2024-09-09 11:49:47 发布

永远的净心

最新推荐文章于 2024-09-09 11:49:47 发布

阅读量158

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_37150764/article/details/123165871

版权

webpack是一个用于现代JavaScript应用程序的模块打包器，它通过构建依赖关系图将所有模块打包成一个或多个bundle。核心概念包括一切皆模块（支持多种资源作为模块）和按需加载（通过分割代码生成多个bundle实现）。webpack允许将大型应用拆分成小模块，提高复用性和性能，通过异步加载实现按需加载，避免一次性加载过大导致的应用卡顿。

摘要由CSDN通过智能技术生成

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。主要是用来将前端资源打包、压缩、优化。
webpack 打包原理：
当webpack 处理应用程序时，不会根据 package.json 文件中的devDependencies 或者 Dependencies 的内容对文件进行打包。而是会根据入口文件做查询，加载其所依赖的包模块，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

两个最核心的概念：

1.一切皆模块
正如js文件可以是一个模块（module）一样，其他的（如css、image或html）文件也可视作模块。因此，你可以require(‘myJSfile.js’)也可以require(‘myCSSfile.css’)。这意味着我们可以业务分割成更小的易于管理的片段，从而达到重复利用的目的。
2.按需加载
传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，bundle.js文件可能有10M到15M之大，可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个bundle文件，而且异步加载部分代码以实现按需加载。