webpack4之如何编写loader的方法步骤

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.编写入门级loader

我在之前的文章中，已经把webpack基础的内容基本上都过了一遍，现在开始准备复习更高级的webpack知识了，首先从loader开始。

首先初始化一个项目

npm init

然后安装依赖

cnpm install -D webpack webpack-cli

创建一个src目录，里面创建一个index.js

新建一个webpack.config.js，写入最基本的配置

如果此时，我们有个需求，中打包过程中，需要把world替换成mark，我们就可以借助loader来实现。首先在src同级目录新建一个loader文件夹，里面新建一个replaceLoader.js。

replaceLoader.js需要导出一个函数，注意：这个函数不能是箭头函数，因为webpack调用loader的时候会对this做一些变更，上面有一些方法，如果使用箭头函数，this指向就会有问题，没有办法调用this上的一些方法。

函数可以接受一个参数，参数是我们源代码的内容，所以可以对source进行操作后，return source，就可以改变源代码了。

然后使用我们自己写的loader，use就不填写loader名称了，需要写我们编写的loader的路径。

这样我们打包后发现，world已经被替换成mark了，这样我们就实现了一个最简单的loader。

2.给loader配置参数

loader中常常可以配置一些参数，那么我们如果想配置参数，要怎么做呢？

此时在replaceLoader中，可以通过this.query访问到参数。

这样打包后，结果就会替换成我们的参数，但是官方推荐我们使用loader-utils来传参。

cnpm install --save-dev loader-utils

这样打包的结果也是我们传入的参数。

3.this.callback

有时候我们不止要return一个resource，还可能要返回多个结果，就需要用到callback。

this.callback(
 err: Error | null,
 content: string | Buffer,
 sourceMap?: SourceMap,
 meta?: any
);

第一个参数是错误，第二个是结果，第三个是sourcemap，第四个可以是任何内容（比如元数据）

4. this.async

在loader中，如果我们直接调用setTimeout，就会报错，那么如果我们想进行异步操作要怎么做呢？

当要使用异步的时候，需要先把callback变为this.callback，然后再返回结果（和this.callback一样）。

这样再打包就不会有任何问题。

额外知识点：我们现在配置loader的时候，需要使用path.resolve，有没有什么方法可以像其他loader一样引用呢？

这样只写loader名称，webpack就会先到node_modules里面找，找不到就去当前目录下的loaders中去找。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack file-loader和url-loader的区别

    1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的.这就会导致图片引入失败.这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅

  • 详解Webpack loader 之 file-loader

    简介 安装 npm install --save-dev file-loader 用法 默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名. import img from './webpack-logo.png' webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', option

  • webpack使用 babel-loader 转换 ES6代码示例

    webpack使用 babel-loader 转换 ES6代码示例

    本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询.https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --save-dev babel-loader babel-core 因为ES6语法每年都在更新,因此,我们需要一定的规则去转换. npm install --save-dev babel-preset-lat

  • 详解webpack自定义loader初探

    最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的loader去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘. webpack想必前端圈的人都知道了,大多数人也都或多或少的用过.简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译.压缩等,最终一起打包到指定的文件中.可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用. 那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理.比如把less.sass文

  • 详解webpack进阶之loader篇

    webpack的loaders是一大特色,也是很重要的一部分.这遍博客我将分类讲解一些常用的laoder 一.loaders之 预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 less-loader less编译器 postcss-loader scss再处理 npm install --save -dev css-loader style-loader sass-loader less-loade

  • webpack源码之loader机制详解

    loader概念 loader是用来加载处理各种形式的资源,本质上是一个函数, 接受文件作为参数,返回转化后的结构. loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中"任务(task)",并提供了处理前端构建步骤的强大方法.loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL.loader

  • 详解webpack loader和plugin编写

    1 基础回顾 首先我们先回顾一下webpack常见配置,因为后面会用到,所以简单介绍一下. 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' //确保文件资源能够在 http://localhost:3000 下正确访问

  • Webpack 之 babel-loader文件预处理器详解

    loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用 loader 来加载各种文件,比如: html文件需要使用html-loader ,css 需要使用css-loader . style-loader 等等. 今天我们来认识的是 babel-loader,用来处理ES6语法,将其编译为浏览器可以执行的js语法. 安装 我们需要用到 babel-loader babel-core babel-preset 配合版本: webpack 3.x | babe

  • webpack3之loader全解析

    首先亮出webpack官方网站,webpack能干什么?官网给出的答案就是,一句话,让一切变得简单! 各式各样的loader层出不穷,让我们在构建时不知所措,于此,总结下loader的全解析. 概念 loader,顾名思义,加载器,英文的解释如下: Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you impor

  • webpack4之如何编写loader的方法步骤

    之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习. 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作. 1.编写入门级loader 我在之前的文章中,已经把webpack基础的内容基本上都过了一遍,现在开始准备复习更高级的webpack知识

  • babel7.x和webpack4.x配置vue项目的方法步骤

    很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了.看来每日沉迷项目,已经跟不上节奏了.这里记录一下遇到的问题以及解决方案. 1.webpack 4.x 插件 extract-text-webpack-plugin (node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use ne

  • C++编写DLL动态链接库的步骤与实现方法

    本文实例讲述了C++编写DLL动态链接库的步骤与实现方法.分享给大家供大家参考,具体如下: 在写C++程序时,时常需要将一个class写成DLL,供客户端程序调用.这样的DLL可以导出整个class,也可以导出这个class的某个方法. 一.导出整个class 方法很简单,只需要在类的头文件中class和类名之间加上_declspec(dllexport),同时在另外一份提供给客户端调用程序使用的类的头文件中class和类名之间加上_declspec(dllimport).为了能让客户端程序和D

  • 使用TS来编写express服务器的方法步骤

    1. 前言 作为前端开发人员而言,ts已经成为了一项必不可少的技能,类型检查可以帮助我们再开发时避免一些不必要的bug,而且ts支持的类和装饰器等语法也更逼近后端语言,更适合服务器的开发. 本文将从零开始,搭建一个集成ts和eslint语法检查的express服务器. 2. 初始化express框架 我们可以使用官方提供的express生成器来快速生成express框架. 当然,express的初始化内容并不复杂,你也可以从一个app.js开始搭建自己喜欢的框架模式. # 使用express生成

  • 用VScode编写C++大型项目的方法步骤

    用VScode编写C++大型项目的方法步骤

    目录 vscode远程开发配置 选用vscode的原因 配置流程 安装C++扩展 ​clang-format格式化代码 安装clang-format 创建clang-format文件 vscode支持clang-format 代码检查工具clang-tidy clang-tidy的安装 cmake实现代码工程化 cmake实践 clang-tidy在cmake中的配置 ccache加速编译 ccache安装 结合cmake使用 vscode远程开发配置 由于后面项目用到了epoll和splice

  • Webpack 4.x搭建react开发环境的方法步骤

    本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记 必要依赖一览(npm install) 安装好. "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "react&

  • webpack3.0升级4.0的方法步骤

    1.webpack 3.11升级4.26 为了提升打包效率,在webpack3.11基础之上做了升级,webpack4.0发布以来,零配置的webpack对项目本身提供的"打包"和"压缩"功能已经做了优化,如果在项目开始使用4.0而不用vue-cli的默认配置,遇到的问题或许能少一些. 2. 安装/升级依赖 这些依赖有的是在build过程中发现依赖有新的替换或者报错,逐步替换的,如果想遇到多个坑,可以先把webpack.webpack-cli升级到对应版本 devD

  • React + webpack 环境配置的方法步骤

    本文介绍了React + webpack 环境配置的方法步骤,分享给大家,具体如下: 安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性. babel-preset-react React语法包,专门用于React的优化,在代码中可以使用React ES6 classes的写法,同时直接支持JSX语法格式 安装Babel loader // 安装babel-core核心模块和babel-loader npm install babel-c

  • Python3安装Scrapy的方法步骤

    Python3安装Scrapy的方法步骤

    本文介绍了Python3安装Scrapy的方法步骤,分享给大家,具体如下: 运行平台:Windows Python版本:Python3.x IDE:Sublime text3 一.Scrapy简介 Scrapy是一个为了爬取网站数据提取结构性数据而编写的应用框架,可以应用于数据挖掘,信息处理或存储历史数据等一些列的程序中.Scrapy最初就是为了网络爬取而设计的.现在,Scrapy已经推出了曾承诺过的Python3.x版本. 为什么学习Scrapy呢?它能我们更好的完成爬虫任务,自己写Pytho

  • Linux下批量修改服务器用户密码方法步骤

    密码快要过期.由于机器数量众多,因此采用批量修改密码的方式来进行处理. 下面是具体步骤: 1.配置ssh免key # ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa # ssh-copy-id 10.230.86.64 (由于只是需要单向的copy文件,因此我们配置63与64到91的boco用户免key即可) 2.测试免key是否配置成功 3.编写密码文件 将所有需要修改的用户与密码按下面格式写到文件里,注意中间不要有空行 vi userpasswdfile.t

随机推荐