Webpack 프레임워크 핵심 개념(지식 정리)

webpack이란 무엇인가요

webpack은 앞면 빌드 도구打包 도구로서(라이브러리나 프레임워크가 아니라), JS(JSX 포함), coffee, css(less 포함)/sass, 이미지 등 모두 모듈로 처리 및 사용됩니다.

1.기본 지식

　　1.1 webpack은 현대 JavaScript 애플리케이션의 모듈 패키지기(module bundler)입니다. webpack이 애플리케이션을 처리할 때, 애플리케이션이 필요한 모든 모듈을 포함하는 의존도 그래프(dependency graph)를 재귀적으로 구축하고, 모든 이 모듈을 하나나 여러 개의 bundle로 패키지합니다.

　　1.2webpack의 네 가지 핵심 개념:

　　　　1.2.1 entry(입구): entry point, 입구 起点(여러 개가 있을 수 있습니다). webpack은 이 출발점에서 시작하여, 입구 파일이 의존하는 어떤 파일인지 찾아내고, 내부 의존도 그래프를 구축하여 처리한 후, 'bundles' 파일로 알려진 파일에 출력합니다

　　　　1.2.2 output(출력): entry point를 처리한 후의 bundles 파일의 출력 경로(path)과 이름(filename)을 지정합니다　　　　

　　　　1.2.3 loader(로더): 비JS 파일을 처리하는 도구로, 모든 파일을 webpack이 처리할 수 있는 모듈로 변환하고, 그 후 webpack에打包 등의 처리를 위탁합니다；webpack 로더는 모든 유형의 파일을 애플리케이션의 의존도 그래프로 바로 참조할 수 있는 모듈로 변환하는 것을 목표로 합니다. 그 목표는 두 가지입니다：

　　　　　　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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。