`

[译]webpack官网文档 :概念 -- 7.模块

阅读更多

原创翻译,转载请注明出处。

原文地址:https://webpack.js.org/concepts/modules/

 

在模块编程里,开发人员把程序分割成几个功能性的块,成为模块。

每一个模块都有一个相对于整个程序较小的表层部分,做一些验证,调试和零碎测试等。写个比较好的模块,提供了一致的抽象和边界封装,所以,在应用整体里每一个模块都有一个清晰的设计和明了的目的。

Node.js几乎从它开始启动的时候,就支持模块编程。在互联网上,支持模块已经慢慢来到。在网上已经有多个支持模块的工具,它们有各样的优点和局限。Webpack从这些系统中吸取教训,把模块的概念适用于你项目中的所有文件。

 

什么是一个webpack模块

对比与Node.js 的模块,webpack模块通过多个渠道扩展了它的相关性。一些例子如:

  • 一个ES2015的import声明
  • 一个CommonJS的require()声明
  • 一个AMD的define和require声明
  • 一个在css/sass/less文件里的@import声明

 

支持的模块类型

Webpack通过加载器支持多种语言和预处理来作成模块。加载器告诉webpack怎样处理非JavaScript模块,并且把它们的依赖一并包含到你的包里。Webpack社区为各种流行语言和语言处理器创建了加载器,包括:

  • CoffeeScript
  • TypeScript
  • ESNext(Babel)
  • Sass
  • Less
  • Stylus

 

还有其他很多!总的来说webpack提供了很多强大而丰富的定制API,它可以让你在任何栈使用webpack,前提是你的开发,测试和产品工作流还处于可扩展状态的时候。

 

-- End --

0
0
分享到:
评论

相关推荐

    Webpack4中文手册(4.39.3).pdf

    Webpack 是一个流行的前端构建工具,它能将各种前端资源(如JS、CSS、图片等)打包成静态资源,以便在浏览器中高效运行。Webpack4是Webpack的最新稳定版本,提供了许多改进和新特性,而Webpack4中文手册则是针对此...

    scratch-gui-develop.zip

    Scratch是麻省理工学院(MIT)媒体实验室终身幼儿园团队开发的一款面向儿童的图形化编程工具,它通过拖拽积木式的编程语块,让孩子们能够轻松地学习编程概念。Scratch3.0是对该平台的最新升级,引入了更多功能、优化...

    Laravel开发-laravel-jos .zip.zip

    同时,通过阅读源代码和文档,你可以了解Laravel框架的使用技巧,包括路由、中间件、视图、模型、控制器、数据库操作、Eloquent ORM、Artisan命令、事件系统、队列、缓存等核心概念。此外,还可以学习到如何在...

    VUE+WebPack游戏开发:神庙逃亡的游戏设计 .zip

    Webpack的核心概念包括入口(entry)、输出(output)、模块加载器(loaders)和插件(plugins)。在“神庙逃亡”的开发中,Webpack可能被用来处理Vue组件、JavaScript代码、样式文件和静态资源。例如,使用Babel loader将...

    03-webpack的loader.rar

    在Web开发中,Webpack 的核心概念是“模块”,它可以处理JavaScript、Vue组件以及静态资源。Loader 是 Webpack 的一个重要组成部分,用于处理不同类型的模块,将它们转换为 Webpack 可以理解的形式。 标题 "03-...

    ac-actor-master.zip

    - Webpack 或 Vite:常用的前端构建工具,用于模块打包和优化。 - ESlint 和 Prettier:代码质量和格式化工具,保持代码风格统一。 - Git:版本控制工具,用于版本管理和协作开发。 如果你打算深入研究或使用这个...

    webpack 官方中文文档.pdf

    ### webpack 官方中文文档知识点总结 #### 一、webpack简介 webpack是一个现代JavaScript应用程序的静态模块打包工具。它的核心功能在于构建一个依赖图(dependency graph),该图映射出项目所需的所有模块,并最终...

    vue面试题-前端程序员必备-前端框架-大厂面试准备.docx

    - 作为webpack的加载器,处理Vue组件文件,将模板、脚本和样式转换为可执行的JavaScript模块。 9. **key的作用**: - 在Vue的Diff算法中,`key`用于唯一标识每个节点,提高DOM更新效率。 10. **axios**: - 一...

    Awais-18-源码.rar

    5. **构建工具**:为了将源码编译成可执行文件,开发者通常会使用构建工具,如Maven、Gradle(Java)或Webpack(JavaScript),它们自动化了编译、打包和依赖管理等过程。 6. **模块化与依赖管理**:现代项目常常...

    some-demo-master.zip

    模块化管理是软件开发中的一个重要概念,它将复杂的程序分解为可重用和独立的模块,每个模块都有特定的功能。这样的设计可以提高代码的可读性、可维护性和可扩展性。在"some-demo-master.zip"中,我们可能会发现以下...

    前端开源库-jsdoc-webpack-plugin

    总结来说,jsdoc-webpack-plugin是前端开发中的一个实用工具,它结合了JSDoc的强大注释解析能力和Webpack的模块打包能力,为前端开发者提供了自动化的文档生成解决方案。在实际开发中,合理利用这样的工具可以提高...

    前端开源库-rosid-handler-js.zip

    2. **模块化**:前端库通常使用模块化系统来组织代码,可能是CommonJS(如webpack)或ES6的import/export。理解如何导入和导出模块对于使用ROSID Handler至关重要。 3. **事件驱动编程**:前端库常用于响应用户交互...

    质量-webpack.7z

    在"质量-webpack.7z"这个压缩包中,我们可以期待找到与优化Webpack配置和提高项目质量相关的资源。 Webpack 的核心概念包括: 1. **入口(Entry)**:定义了应用的起点,Webpack 从这里开始构建模块图。 2. **输出...

    Webpack2 中文文档 pdf

    ### Webpack2 中文文档概览 #### Webpack 概述 Webpack 是一款现代前端项目的模块打包工具。它能够将项目中的多个独立模块按照依赖关系和规则打包成适合生产环境部署的静态资源,并且支持按需加载的代码分割功能。...

    Webpack中文手册 pdf

    这本手册主要涵盖了Webpack的基础概念、安装方法、配置技巧以及如何利用Webpack构建现代化的前端项目等内容。 ### Webpack简介 Webpack是一款非常流行的模块打包工具,它能够帮助开发者将各种资源(如JavaScript...

    前端项目-angular-input-masks.zip

    2. **AngularJS模块和依赖注入**:学习如何在AngularJS应用中创建和使用模块,并通过依赖注入来管理组件和服务。 3. **自定义指令**:Angular-input-masks可能通过自定义指令实现输入掩码功能,了解如何创建和使用...

    2018-02-27-LessDemo.rar

    GitHub是一个开发者常用的代码托管平台,用于版本控制和协作,这通常意味着这个项目不仅有代码,还可能有版本历史、README文件或其他开发者文档。 【标签】"前端"指明了这个项目与Web前端开发有关,前端开发涵盖了...

    前端项目-webrtc-adapter.zip

    7. **构建工具**:前端项目通常会用到Webpack、Rollup或Parcel等构建工具,进行代码打包、优化和资源管理。 8. **测试和调试**:单元测试可能使用Jest、Mocha等工具,集成测试则可能借助Cypress、Puppeteer等,而...

Global site tag (gtag.js) - Google Analytics