对 Webpack 的理解

结论先行:

Webpack 是目前比较常用的模块打包工具,它能够管理和打包我们开发中所用到的 HTML、 CSS、JS 以及各种静态资源文件。

webpack内部做的事情呢,就是分析出各个模块之间的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。

它的特点呢,一个是支持模块化开发,再一个呢就是支持代码分割和按需加载。

1、什么是 webpack?

webpack 是目前比较常用的模块打包工具,它能够很好地管理与打包开发中所用到的 HTML、 JavaScript 、CSS以及各种静态文件(图片、字体等)。

使用 webpack 管理模块依赖,并编译输岀模块所需的静态文件,让开发过程更加高效。

对于不同类型的资源, webpack 有对应的模块加载器。

它会分析模块间的依赖关系,最后生成优化且合并后的静态资源。

当 webpack 处理应用程序时,它会在内部构建一个依赖图,此依赖图对应映射到项目所需的每个模块(不再局限js文件),然后形成资源列表,最终打包生成到指定的文件中。

webpack 做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。

对 Webpack 的理解_第1张图片

2、webpack 的两大特色

① 代码切割(code splitting)

 可以将代码切割成不同的块,实现按需加载,缩短了初始化时间;

②  loader 和模块化支持

使用 loader 处理各种类型的静态文件,并且支持串行操作 webpack 以 CommonJS 规范来书写代码,但对 AMD/CMD 的支持也很全面,方便对项目进行代码迁移。

webpack 具有 require.js 和 browserify 的功能,但也有很多自己的新特性:

(1)对 CommonJS、AMD、ES6 的语法实现了兼容;

模块化支持:Webpack 通过支持 CommonJS、AMD、ES Module 等多种模块化规范,使得前端开发可以使用模块化的方式组织代码,提高代码复用性和可维护性。 

(2)对 JavaScript、CSS、图片等资源文件都支持打包;

打包功能:Webpack是一个静态模块打包器,能够将多个模块打包成一个或多个文件。

它能够处理JavaScript、CSS、图片等各种资源,并且支持代码分割和按需加载等高级功能,可以将代码进行优化,减少网络请求,提高页面加载性能。

(3)串联式模块加载器和插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、 EMAScript 6的支持;

(4)有独立的配置文件 webpack.config.js;

开发服务器:Webpack 提供了一个内置的开发服务器,可以在开发过程中实时预览页面效果。支持热模块替换(Hot Module Replacement),即在不刷新整个页面的情况下,只更新发生变化的模块,加快开发速度。

(5)可以将代码切割成不同的块,实现按需加载,缩短了初始化时间;

(6)支持 SourceUrls 和 SourceMaps,易于调试;

(7)具有强大的 Plugin 接口,大多是内部插件,使用起来比较灵活;

插件系统:Webpack 拥有强大的插件系统,可以通过各种插件来扩展其功能。

例如,通过 UglifyJsPlugin 可以对 JavaScript 代码进行压缩;

通过 MiniCssExtractPlugin 可以将 CSS 代码提取为独立的文件;

通过 HtmlWebpackPlugin 可以自动生成 HTML文件等。

这些插件大大增强了 Webpack 的灵活性和扩展性。

(8)使用异步I/O,并具有多级缓存,这使得 webpack 速度很快且在增量编译上更加快。

(9)生态系统:Webpack拥有庞大的生态系统,有许多社区贡献的插件和工具可供使用。这些插件和工具可以帮助开发者解决各种问题,提高开发效率。

你可能感兴趣的:(每日专栏,Webpack,webpack,前端,node.js)