首页 > 其他分享 >webpack(loader)

webpack(loader)

时间:2023-12-26 23:36:13浏览次数:45  
标签:module loader webpack 模块 import css

loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。如:将ts转成js,将内联图转为data URL

示例

// 安装依赖
npm install --save-dev css-loader ts-loader

// webpack.config.js

module.exports = {
// 程序中组件或者依赖都看成是module,所以loader是在module中的,是对module的处理。module的处理规则(rule)是css-loader,ts-loader module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { test: /\.ts$/, use: 'ts-loader' }, ], }, };

使用 loader

有两种使用 loader 的方式:

  • 配置方式(推荐):在 webpack.config.js 文件中指定 loader。
  • 内联方式:在每个 import 语句中显式指定 loader。

注意在 webpack v4 版本可以通过 CLI 使用 loader,但是在 webpack v5 中被弃用

Configuration

loader 从右到左(或从下到上)地取值(evaluate)/执行(execute)。在下面的示例中,从 sass-loader 开始执行,然后继续执行 css-loader,最后以 style-loader 为结束。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
    ],
  },
};

内联方式

可以在 import 语句或任何 与 "import" 方法同等的引用方式 中指定 loader。使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

  内联 import 语句可以添加前缀 "!" 、"!!"、"-!"。尽量不用,这里不详述

尽量使用configuration。

loader 特性(下面的特性不明白具体应用是什么样的???后续章节后理解)

  • loader 支持链式调用
  • loader 可以是同步的,也可以是异步的
  • loader 运行在 Node.js 中,并且能够执行任何操作
  • loader 可以通过 options 对象配置
  • 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader,还可以在 module.rules 中使用 loader 字段直接引用一个模块
  • 插件(plugin)可以为 loader 带来更多特性
  • loader 能够产生额外的任意文件

可以通过 loader 的预处理函数,为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑,例如:压缩、打包、语言转译(或编译)和 更多其他特性

解析 loader

loader 遵循标准 模块解析 规则。多数情况下,loader 将从 模块路径 加载(通常是从 npm installnode_modules 进行加载)

我们预期 loader 模块导出为一个函数,并且编写为 Node.js 兼容的 JavaScript。

按照约定,loader 通常被命名为 xxx-loader(例如 json-loader)。

 

原文:https://webpack.docschina.org/concepts/loaders/#resolving-loaders

 

标签:module,loader,webpack,模块,import,css
From: https://www.cnblogs.com/withheart/p/17929600.html

相关文章

  • webpack(入口起点entry 和 输出output)
    单个入口(简写)语法//单个入口,简写,字符串module.exports={entry:'./path/to/my/entry/file.js',};上面是单个入口的语法,是下面的简写://单个入口,完整,对象类型module.exports={entry:{main:'./path/to/my/entry/file.js',},};//多个入口,数组。outpu......
  • webpack(概念)
    入口(entry)入口起点(entrypoint)指示webpack打包起点。构建依赖图(dependencygraph)的开始。默认值是 ./src/index.js。可以配置,如下:webpack.config.jsmodule.exports={entry:'./path/to/my/entry/file.js',};输出(output)output告诉webpack在哪里输出它所创建的 bu......
  • 控制台打印时显示的文件来源没有显示.vue文件,而是出现了一堆index.js??clonedRuleSet-
    控制台打印时显示的文件来源没有显示.vue文件,而是出现了一堆index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-optio…,看不出来打印的语句来自哪个vue组件检查发现edge打印显示正常,谷歌打印是以上这样的,谷歌设置一下配置 ......
  • 如何通过蛋壳Uploader把ipa文件上传到App Store教程步骤
    在移动应用开发的过程中,将ipa文件上传至AppStore是非常关键的一环。对于那些没有Mac电脑的开发者来说,这一步骤可能会成为一个挑战。幸运的是,有一个名为“蛋壳Uploader”的在线工具,可以帮助开发者在没有Mac的情况下,轻松上传ipa文件到AppStore。一、准备工作在使用蛋壳Uploader......
  • bootloader and fireware
    简介bootloader扮演的角色bootloader是一段代码,负责以下基本功能:基础的硬件初始化。从闪存、网络或其他类型的非易失性存储中加载二进制应用程序,通常是操作系统内核。可能需要对应的二进制程序文件进行解压缩。执行应用程序。除了这些基本功能外,大多数引导加载程序还......
  • 解决分层打包后,报Could not find or load main class org.springframework.boot.loade
    解决分层打包后,报Couldnotfindorloadmainclassorg.springframework.boot.loader.JarLauncher错误发现问题升级到springboot3.2后,之前的分层打包启动后会报一下错误Error:Couldnotfindorloadmainclassorg.springframework.boot.loader.JarLauncherCausedby:......
  • [VUE] WebPack 打包后自动修改 dist 中 package.json 版本号
    我们在开发npm包时,开发期的package.json通常并不一定是发布到npm仓库的package.json。这种情况下每次改版本号需要改两个地方,比较麻烦。我一般使用webpack进行打包,所以有了下面这个小插件。插件源码modify.version.plugin.js/**修改版本号webpack插件*/functi......
  • ubuntu 18.04.6 编译Preloader提示 没有规则可制作目标 /host_tools/altera/preloader
     生成spl_bsp后,在spl_bsp路径下输入make 提示:没有规则可制作目标/host_tools/altera/preloader/uboot-socfpga.tar.gz 原来要先运行 ./embeddedcommandshell.sh,并在该终端窗口下输入make   ......
  • Vue使用vue-simple-uploader上传文件夹
    Vue使用vue-simple-uploader上传文件夹先睹为快1点击上传“上传文件夹”按钮 2选择文件夹 3确定上传 4上传进度 引入控件installnpminstallvue-simple-uploader--savemain.js配置importuploaderfrom'vue-simple-uploader'Vue.use(uploader)vue......
  • MegEngine 优化 dataloader 使用体验!data monitor 帮助更好定位性能瓶颈
    业务模型训练中Data部分可能是瓶颈所在在训练业务模型过程中,如果我们发现模型的训练速度不符合预期,往往会下意识地认为网络本身出了问题。但实际上,大多数时候问题发生在模型的数据供给逻辑中。区分一个训练过程的瓶颈到底是在准备数据,还是在网络的计算阶段其实是很简单的。比......