English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Core Concepts of Webpack Framework (Knowledge Organization)

What is webpack

webpack is a front-end building tool (not a library or framework), which can process various resources, such as JS (including JSX), coffee, css (including less/sass), images, and others are all treated and used as modules.

1.Basic knowledge points

  1.1 webpack is a modern JavaScript application module bundler (module bundler). When webpack processes an application, it recursively builds a dependency graph, which includes all the modules required by the application, and then packages all these modules into one or more bundles

  1.2The four core concepts of webpack:

    1.2.1 entry (entry): Entry point, entry point (there can be multiple), webpack starts from this point to find out which files are dependent on the entry file, thereby constructing an internal dependency graph and outputting it to files called bundles

    1.2.2 output (output): Specifies the output path (path) and name (filename) of the bundles files after processing by the entry point    

    1.2.3 loader (loader): It is used to process non-JS files, converting all files into modules that webpack can handle, and then passing them to webpack for packaging and other processing; in essence, webpack loader converts all types of files into modules that can be directly referenced in the application's dependency graph, with two main objectives:

      1.2.3.1 使用test属性,识别出对应于 loader 的可转换文件

      1.2.3.2 使用use属性将这些文件进行转换,使其被添加到依赖图中,并且最终会添加到 bundle 中

      如果要在 webpack 配置中定义 loader ,要在 module.rules 中定义,而不是 rules

    1.2.4 plugins(插件):从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以处理各种各样的任务

      使用一个插件只需要 require() 它,然后把它添加到 plugins 数组中就行。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。

      webpack 提供许多开箱可用的插件!查阅插件列表获取更多信息,更详细的图文请参阅官方文档 https://doc.webpack-china.org/concepts/

总结

以上所述是小编给大家介绍的Webpack框架核心概念(知识点整理),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程的支持!

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#oldtoolbag.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

You May Also Like