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中去找。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
webpack file-loader和url-loader的区别
1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的.这就会导致图片引入失败.这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅
-
详解webpack自定义loader初探
最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的loader去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘. webpack想必前端圈的人都知道了,大多数人也都或多或少的用过.简单的说就是它能够加载资源文件,并对这些文件进行一些处理,诸如编译.压缩等,最终一起打包到指定的文件中.可以说,它作为一个打包工具,在前端工程化浪潮中,起到了中流砥柱的作用. 那webpack其中非常重要的一环就是,能够对加载的资源文件,进行一些处理.比如把less.sass文
-
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
-
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
-
详解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使用 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 之 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源码之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 下正确访问
-
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远程开发配置 选用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的方法步骤,分享给大家,具体如下: 运行平台: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
随机推荐
- C++全密码生成的实现代码
- 当菜鸟遇上黒客之三:QQ防盗篇
- mongodb中使用distinct去重的简单方法
- mysql 导入导出数据库、数据表的方法
- 简介Python中用于处理字符串的center()方法
- innerHTML,outerHTML,innerTEXT三者之间的区别
- 零基础学习教程之Linux下搭建android开发环境
- php写的简易聊天室代码
- Python获取Linux系统下的本机IP地址代码分享
- C#生成饼形图及添加文字说明实例代码
- 验证用户是否修改过页面的数据的实现方法
- jQuery on()绑定动态元素出现的问题小结
- jQuery中的pushStack实现原理和应用实例
- jquery获取tagName再进行判断
- JQuery中html()方法使用不当带来的陷阱
- jquery操作select元素和option的实例代码
- 如何在指定的地方插入html内容和文本内容
- vue webuploader 文件上传组件开发
- RequireJS简易绘图程序开发
- C语言实现图书管理系统