webpack中的 loader 是什么?

更新日期: 2019-09-21阅读: 1.9k标签: loader

1. 一个引入图片模块的案例

// index.js
import doggy from 'doggy.jpg'
const kitty = require('kitty.jpg')

执行命令,结果是没有打包成功的,终端输出以下的错误:

ERROR in ./src/cat.jpg 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loader                                            s are configured to process this file. See https://webpack.js.org/concepts#loade                                            rs
(Source code omitted for this binary file)
 @ ./src/index.js 6:12-32

ERROR in ./src/doggy.jpg 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loader                                            s are configured to process this file. See https://webpack.js.org/concepts#loade                                            rs
(Source code omitted for this binary file)
 @ ./src/index.js 5:0-31 8:12-17

那是因为,webpack 默认只支持打包 Javascript 模块,比如 import m1 from 'm1.js',而对于引入了图片模块,webpack 并不知道该如何处理,因此在打包的时候就报错了。


2. 使用 loader

对于上述打包图片资源报错的问题,可以通过设置 module 配置项使用 loader 来解决。

module.exports = {
  // 省略其他配置项
  module: {
    rules: [
      test: /\.jpg$/,
      use: {
        loader: 'file-loader'
      }
    ]
  }
}

可以看到,我们使用了 file-loader,再次打包,输出信息如下:

Hash: b214eba26b37ad1342b7
Version: webpack 4.40.2
Time: 182ms
Built at: 2019-09-22 11:02:18
                               Asset      Size  Chunks             Chunk Names
11e15173d7f38a223d340822e4364ddb.jpg  7.43 KiB          [emitted]
b46911807fa4ee30cf3bf65a135625a5.jpg  4.92 KiB          [emitted]
                             main.js  5.61 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/cat.jpg] 82 bytes {main} [built]
[./src/doggy.jpg] 82 bytes {main} [built]
[./src/index.js] 142 bytes {main} [built]

项目目录下生成了一个 dist 文件夹,里面包含了 main.js 和两张图片(11e15173d7f38a223d340822e4364ddb.jpg 和 b46911807fa4ee30cf3bf65a135625a5.jpg)。


3. loader 是什么

综上,loader 提供了打包方案,当 webpack 不知道该如何打包图片模块、css 模块或者其他非 Javascript 模块的时候,可以使用各式各样 loader 来帮助 webpack 打包这些模块。

使用 loader 的三种方式:

  • 配置(推荐):在 webpack.config.js 文件中指定 loader,如上述例子。
  • 内联:在每个 import 语句中显式指定 loader,import Styles from 'style-loader!css-loader?modules!./styles.css';。
  • CLI:在 shell 命令中指定它们,webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'。


原文:https://segmentfault.com/a/1190000020457820


链接: https://www.fly63.com/article/detial/5445

webpack中loader加载器的使用及原理

webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于打包的,里面的所有资源都是“模块”,内部实现了对模块资源进行加载的机制。loader的作用为了转换应用程序的资源文件。

vue-cli项目报错Invalid CSS after ...load the styles解决方案_loader重复加载

知道在webpack中使用scss,less之类的东西,需要配置style-loader, css-loader, sass-loader这些,但是在vue-cli的项目中会报Invalid CSS after ...load the styles的错误,这是由于loader重复加载导致的。

webpack之理解loader

我们在写webpack配置文件的时候,应该有注意到经常用到loader这个配置项,那么loader是用来做什么的呢?loader其实是用来将源文件经过转化处理之后再输出新文件。

移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置

方案一:使用lib-flexible包:使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包;方案二:使用less或者sass等CSS 预处理语言写适配方案:基准按照设计图尺寸,但是缺点是不通用,不同页面可能设计图基准尺寸不同

webpack 中的 file-loader 和 url-loader

通过配置 name 和 outputPath 选项,可以自定义图片名称和路径。打包后,dist 目录下会生成一个 images 文件夹;url-loader 将图片转化成 base 编码字符串和 main.js 打包在一起。

Babel-loader,babel-core和babel-preset之间是什么关系

`babel-loader` 是一个 npm 包,它使得 webpack 可以通过 babel 转译 JavaScript 代码。babel 的功能在于「代码转译」,具体一点,即将目标代码转译为能够符合期望语法规范的代码。在转译的过程中

分享12个Webpack中常用的Loader

整理一些常用的loader分享给大家,方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行,不喜勿喷。style-loader用于将css编译完成的样式,挂载到页面style标签上。

项目性能优化之用url-loader把小图片转base64,大图片使用image-webpack-loader压缩

项目中常常会引入一些图片资源,什么jpg|jpeg|png|gif|ico之类的,正常情况下,我们需要做一下性能优化,看看如何大而化小、小而化了,提升生产环境资源加载速度。所以,本文记录一下大图片使用image-webpack-loader插件压缩一下

可能改变前端工程化未来的特性:ESM Loader Hooks

用过webpack的朋友一定知道webpack中有个loader的概念,用于加载并处理不同类型文件,比如css-loader、url-loader。loader的执行顺序取决于webpack内部对文件树解析、遍历的顺序。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!