webpack自定义loader并发布
一、官网对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/'
}
}
]
webpack自定义loader并发布的更多相关文章
- webpack自定义loader和自定义插件
1.封装自定义的功能loader (格式很简单,重点在于loader-utils,loaderUitls.getOptions可获取webpack配置rules中的options以供使用 ) 这只是一 ...
- webpack的loader的原理和实现
想要实现一个loader,需要首先了解loader的基本原理和用法. 1. 使用 loader是处理模块的解析器. module: { rules: [ { test: /\.css$/, use: ...
- webpack的loader和plugin的区别
[Loader]:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转 ...
- webpack之loader实践
初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...
- 自定义Loader
自定义Loader涉及到的接口: public delegate byte[] CustomLoader(ref string filePath); public void LuaEnv.AddLoa ...
- webpack之loader和plugin简介
webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...
- APICloud框架--sublime使用自定义loader
官方的apploader调试器,只是有官方的一些模块,如果我们使用非官方的模块就要使用自定义loader进行调试.接下来就走一边sublime设置自定义loader的步骤 修改config.xml 打 ...
- webpack之Loader
我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用,但同时这也是webpack的缺点,只能用于模块化开发的项目,例如:Vue,React,Angular.Webpack在进行打 ...
- Webpack 之 Loader 的使用
安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...
随机推荐
- LVS之NAT模式
目录: 网络环境 LVS服务器配置 LVS服务器添加ipvs规则 RS服务器配置 访问验证 抓包分析 注意事项 [网络环境] 服务器类型 IP 说明 lvs_vip 192.168.2.130 vip ...
- spring boot 下 开启 gzip
[参考文章]:Spring boot开启Gzip压缩 [参考文章]:Accept-Encoding Spring 版本 :5.1.2-RELEASE 1. application.yml 配置 ser ...
- POJ 3083 -- Children of the Candy Corn(DFS+BFS)TLE
POJ 3083 -- Children of the Candy Corn(DFS+BFS) 题意: 给定一个迷宫,S是起点,E是终点,#是墙不可走,.可以走 1)先输出左转优先时,从S到E的步数 ...
- matlab遍历文件夹下所有图片和遍历所有子文件夹下图片
做图像处理实验,经常需要遍历当前文件下所有图片.matlab当然很早就考虑了这个问题,库函数dir就是完成这个工作的.函数返回的是一个存放所有目录下文件信息的结构体,通过遍历结构体就可以达到访问所有文 ...
- ubuntu下如何安装7z压缩工具?
答: sudo apt-get install p7zip 1. 解压 7zr x filename.7z 2. 压缩 7zr a -t7z -r filename.7z ~/filename/* 各 ...
- 1、DNS服务基础
w'indows上名称解析目录: C:\Windows\System32\drivers\etc https://jocent.me/2017/06/18/dns-protocol-principle ...
- [ZT]Enhancement-01
Enhancement(1)--BTEs 最近一个同事碰到一个FI的增强,要用BTEs实现,我也是第一次接触到这种增强,所以跟着他一起做了一下.写一个这方面的小节. BTEs(Business ...
- lumen返回网站base url
可以使用全局帮助函数url() echo url(); //输出http://test.domain.com
- java中,有关移位运算符的有关讨论
java中有三种移位运算符 << : 左移运算符,num << 1,相当于num乘以2 >> : 右移运算符,num >& ...
- 实战keras——用CNN实现cifar10图像分类
原文:https://blog.csdn.net/zzulp/article/details/76358694 import keras from keras.datasets import cifa ...