webpack自定义loader并发布到npm
一、官网对loader的解释:
1、loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 loader API,并通过 this
上下文访问。
https://webpack.docschina.org/contribute/writing-a-loader
2、loader具有哪些特征?
https://webpack.docschina.org/concepts/loaders/#loader-features
loader 用于对模块的源代码进行转换。loader 可以使你在 import
或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import
CSS文件!
二、三种本地开发测试的方法:
下面的一个例子是为了实现在开发和生产环境,分别引入不同的资源文件路径。首先我们在build目录下写一个loader:
static-loader中index.js的代码为:
let loaderUtils = require('loader-utils');module.exports = function(source) {let options = loaderUtils.getOptions(this) || {};source = source.replace(/(\/static\/)(.*?\.(png|jpe?g|gif|webp))/g, options.replace + '$2');return source }
测试方法1、匹配(test)单个 loader,可以简单通过在 rule 对象设置 path.resolve
指向这个本地文件
rules: [{test: /\.(js|vue|css)$/,loader: path.resolve(__dirname, './Loaders/static-loader/index.js'),include: path.resolve(__dirname, '../src'),exclude: path.resolve(__dirname, '../node_modules'),options: {replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'}}]
测试方法2、匹配(test)多个 loaders,可以使用 resolveLoader.modules
配置,webpack 将会从这些目录中搜索这些 loaders。
resolveLoader: {modules: [path.resolve(__dirname, '../build/Loaders'),'node_modules']},module: {rules: [{test: /\.(js|vue|css)$/,loader: path.resolve(__dirname, './Loaders/static-loader/index.js'),include: path.resolve(__dirname, '../src'),exclude: path.resolve(__dirname, '../node_modules'),options: {replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'}}]}
测试方法3、创建独立的库和包,你可以使用 npm link
,来将其关联到你要测试的项目。
1、首先在github上建立自己的仓库,clone到本地,执行npm init初始化项目,新建以下文件。
使用.gitignore和.npmignore将node_modules排除。index.js为loader代码。
2、在本地仓库文件夹下执行npm link,如果遇到权限问题,执行sudo npm link
3、在另外的项目文件中,执行sudo npm link custome-tian-loader,将自定义的loader映射到当前项目的node_modules目录下
https://docs.npmjs.com/cli/link
三、将loader上传至npm
1、首先在npmjs.com注册一个npm账号,设置邮箱后会收到一封验证的邮箱,需要去点击链接才能发布模块
2、执行npm adduser 用户名 或者 npm login
3、执行npm publish,发现报错了:
4、解决这个错误的办法:
a. 检查仓库是否被设成了淘宝镜像库
npm config get registry
https://registry.npm.taobao.org/
b. 如是,则设回原仓库
npm config set registry=http://registry.npmjs.org
c. 登录账号(如未登录)
npm login 或者添加用户 npm adduser
d. 再次发布
npm publish
e. 如发布成功,则再次将仓库地址设为淘宝镜像地址
npm config set registry=https://registry.npm.taobao.org/
5、发布上去后,在npmjs.com官网就可以看到自己的loader模块:
6、在项目中npm i custome-tian-loader,就可以和引入其他node模块一样引入自己的loader了:
rules: [{test: /\.(js|vue|css)$/,loader: 'custome-tian-loader',include: path.resolve(__dirname, '../src'),exclude: path.resolve(__dirname, '../node_modules'),options: {replace: process.env.NODE_ENV == 'production' ? './production/static/' : './development/static/'}} ]
转载于:https://www.cnblogs.com/angelatian/p/11119739.html
webpack自定义loader并发布到npm相关推荐
- webpack自定义loader
创建自己的Loader 创建自己的Loader Loader是用于对模块的源代码进行转换(处理),css-loader.style-loader.babel-loader等. 如何自定义自己的Load ...
- Webpack自定义Loader和Plugin方法
手写Loader Loader 本质上是导出函数的 JavaScript 模块,而该模块导出的函数被称为 Normal Loader,在开发 Loader时,我们可以在导出的函数上添加一个 pitch ...
- vue-cli Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
- 前端组件库(Element UI)的实现原理:教你如何实现自定义组件库,并打包发布至npm
前端组件库实现原理 前言 Demo地址 一. 组件库开发流程 1)新建vue项目: 2)编写自定义组件,封装成插件: 3)修改配置项 webpack.config.js: pakage.json: 4 ...
- webpack:自定义loader
以下是一个自定义loader replace-loader,实现一个类似模板引擎变量替换的简单功能 文件目录 . ├── dist │ └── index.js # 打包结果 ├── loaders ...
- Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
- webpack loader解析及自定义loader
自定义实现webpack loader加载模块,解析指定的类型文件 loader loader是一个导出为函数的node模块,可通过this访问上下文. 特点: loader单一职责,只负责解决单一的 ...
- webpack创建library及从零开始发布一个npm包
最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...
- vue封装第三方插件并发布到npm
前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...
最新文章
- koa-grace:一个基于koa的node多应用MVC框架
- 程序员你为什么这么累【续】:如何应对需求变更
- cfile清空文件内容_电脑C盘文件夹哪些可以删除?教你如何快速清理,旧电脑还能用3年...
- 【阿里云课程】深度生成模型基础,自编码器与变分自编码器
- abap CA CO CS等操作符
- 大宝的读后感:(转载)
- gnuradio上怎么使用python文件_使用Python从PDF文件中提取数据
- Microsoft Teams的Meet Now功能
- MySQL 快速创建千万级测试数据
- python列表存储字符串_Python 基础知识全篇-字符串列表
- 没有bug队——加贝——Python 练习实例 29,30
- 作业调度进程c语言代码,进程调度 时间片轮转调度算法源代码(C语言)
- 自动驾驶算法-滤波器系列(五)——高级运动模型在UKF中的应用
- 移动端浏览器监听返回键
- linux系统c语言编译icpc,ACM-ICPC 比赛环境的使用
- 设计模式 ( 十三 ) JDK动态代理模式
- 如何才能真正的学会设计模式
- mt7620 eeprom 小米_小米CC9 Pro搭载1亿像素传感器,新款手表引关注;谷歌称微信软件性能太差;iPhone明年或配备120Hz屏幕...
- 情感驿站001:马云开个酒吧,取名《平头哥》
- java制作进度条,Java制作进度条