Rumah  >  Artikel  >  hujung hadapan web  >  Webpack模块的使用

Webpack模块的使用

php中世界最好的语言
php中世界最好的语言asal
2018-03-19 14:51:001621semak imbas


 

模块

模块化编程中,开发者将单独功能的代码分装成模块。

每个模块体积都会比一大坨程序的体积小,使得调试和编写变得方便。

NodeJs自创建以来就支持了模块化编程,但是在Web编程中,模块化一直很迟钝(没被支持),当然也有很多为了模块化而出现的Js模块化工具,它们各有优缺点。

Webpack去粗取精,继承它们优秀的地方,使得模块化适合Web项目中的任何文件。

什么是Webpack模块

和NodeJs单一化的表达方式不同,Webpack可以用多种方式来完成、实现模块化的编程:

  • ES6的 import 表达

  • CommonJS的 require() 表达

  • AMD(异步模块定义)的 define 和 require 表达

  • CSS/SASS/LESS文件中的 @import 表达

  • 样式表或html文件中的图像url地址(不明?)

Webpack 1代需要特定的加载器完成ES6的 import 表达,但是Webpack 2代就原生支持了。

支持的模块类型

Webpack支持用加载器来加载各种不同类型的模块,加载器会告诉Webpack这些模块是什么(因为不是JavaScript模块了呀),然后会打包在一起。

支持的类型包括:

  • CoffeeScript

  • TypeScript

  • ESNext(Babel)

  • Sass

  • Less

  • Stylus

等等。Webpack支持很多种Web编程的模块化打包使得开发者更容易进行Web开发。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

事件模型的详解

event loop如何使用

JavaSript事件冒泡和事件捕获如何实现

Atas ialah kandungan terperinci Webpack模块的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Node如何启动https服务器Artikel seterusnya:js的原型及原型链详解