webpack基础教程:

Posted 花雨伞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack基础教程:相关的知识,希望对你有一定的参考价值。

1、 Loader

  上一节我们讲了webpack的一些基本认识及概念,接下来我们继续探索webpack的 Loader,那么何为Loader?它的作用是什么?

  1. Webpack 本身只能处理 javascript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
  2. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。

  1.1 Loader的特性

  • Loader 可以通过管道方式链式调用,每个 loader 可以把资源转换成任意格式并传递给下一个 loader ,但是最后一个 loader 必须返回 JavaScript
  • Loader 可以同步或异步执行。
  • Loader 运行在 node.js 环境中,所以可以做任何可能的事情。
  • Loader 可以接受参数,以此来传递配置项给 loader。
  • Loader 可以通过文件扩展名(或正则表达式)绑定给不同类型的文件。
  • Loader 可以通过 npm 发布和安装。
  • 除了通过 package.json 的 main 指定,通常的模块也可以导出一个 loader 来使用。
  • Loader 可以访问配置。
  • 插件可以让 loader 拥有更多特性。
  • Loader 可以分发出附加的任意文件。

  1.2 Loader 本身也是运行在 node.js 环境中的 JavaScript 模块,它通常会返回一个函数。

    Loader 可以在 require() 引用模块的时候添加,也可以在 webpack 全局配置中进行绑定,还可以通过命令行的方式使用。

以上是关于webpack基础教程:的主要内容,如果未能解决你的问题,请参考以下文章

webpack基础教程:

webpack入门教程

webpack从0到1超详细超基础学习教程

第641期基于 webpack 搭建前端工程基础篇

jstl标签库基础教程及其使用代码

Vue基础自学系列 | webpack中的插件