一、官网对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并发布的更多相关文章

  1. webpack自定义loader和自定义插件

    1.封装自定义的功能loader (格式很简单,重点在于loader-utils,loaderUitls.getOptions可获取webpack配置rules中的options以供使用 ) 这只是一 ...

  2. webpack的loader的原理和实现

    想要实现一个loader,需要首先了解loader的基本原理和用法. 1. 使用 loader是处理模块的解析器. module: { rules: [ { test: /\.css$/, use: ...

  3. webpack的loader和plugin的区别

    [Loader]:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转 ...

  4. webpack之loader实践

    初识前端模板概念的开发者,通常都使用过underscore的template方法,非常简单好用,支持赋值,条件判断,循环等,基本可以满足我们的需求. 在使用Webpack搭建开发环境的时候,如果要使用 ...

  5. 自定义Loader

    自定义Loader涉及到的接口: public delegate byte[] CustomLoader(ref string filePath); public void LuaEnv.AddLoa ...

  6. webpack之loader和plugin简介

    webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...

  7. APICloud框架--sublime使用自定义loader

    官方的apploader调试器,只是有官方的一些模块,如果我们使用非官方的模块就要使用自定义loader进行调试.接下来就走一边sublime设置自定义loader的步骤 修改config.xml 打 ...

  8. webpack之Loader

    我们知道webpack的优点之一就是专注于处理模块化的项目,能做到开箱即用,但同时这也是webpack的缺点,只能用于模块化开发的项目,例如:Vue,React,Angular.Webpack在进行打 ...

  9. Webpack 之 Loader 的使用

    安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...

随机推荐

  1. LVS之NAT模式

    目录: 网络环境 LVS服务器配置 LVS服务器添加ipvs规则 RS服务器配置 访问验证 抓包分析 注意事项 [网络环境] 服务器类型 IP 说明 lvs_vip 192.168.2.130 vip ...

  2. spring boot 下 开启 gzip

    [参考文章]:Spring boot开启Gzip压缩 [参考文章]:Accept-Encoding Spring 版本 :5.1.2-RELEASE 1. application.yml 配置 ser ...

  3. POJ 3083 -- Children of the Candy Corn(DFS+BFS)TLE

    POJ 3083 -- Children of the Candy Corn(DFS+BFS) 题意: 给定一个迷宫,S是起点,E是终点,#是墙不可走,.可以走 1)先输出左转优先时,从S到E的步数 ...

  4. matlab遍历文件夹下所有图片和遍历所有子文件夹下图片

    做图像处理实验,经常需要遍历当前文件下所有图片.matlab当然很早就考虑了这个问题,库函数dir就是完成这个工作的.函数返回的是一个存放所有目录下文件信息的结构体,通过遍历结构体就可以达到访问所有文 ...

  5. ubuntu下如何安装7z压缩工具?

    答: sudo apt-get install p7zip 1. 解压 7zr x filename.7z 2. 压缩 7zr a -t7z -r filename.7z ~/filename/* 各 ...

  6. 1、DNS服务基础

    w'indows上名称解析目录: C:\Windows\System32\drivers\etc https://jocent.me/2017/06/18/dns-protocol-principle ...

  7. [ZT]Enhancement-01

    Enhancement(1)--BTEs 最近一个同事碰到一个FI的增强,要用BTEs实现,我也是第一次接触到这种增强,所以跟着他一起做了一下.写一个这方面的小节.    BTEs(Business ...

  8. lumen返回网站base url

    可以使用全局帮助函数url() echo url(); //输出http://test.domain.com

  9. java中,有关移位运算符的有关讨论

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>      :     右移运算符,num >& ...

  10. 实战keras——用CNN实现cifar10图像分类

    原文:https://blog.csdn.net/zzulp/article/details/76358694 import keras from keras.datasets import cifa ...