webpack loader开发并发布到npm

最新推荐文章于 2024-07-11 21:22:30 发布

chaochao_o

最新推荐文章于 2024-07-11 21:22:30 发布

阅读量898

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/lichao000124/article/details/99709093

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何开发一个webpack loader，强调单一职责和链式调用的概念，并详细讲解了从创建loader到发布到npm的步骤，包括在github创建仓库、npm初始化、npm link关联测试项目、npm publish发布到npm等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

loader开发

loader可以被链式调用，为每一步创建一个loader而不是一个loader做所有的事情。
单一职责
链式组合
例如：开发一个comment-require-loader作用是将JavaScript代码中的注释语法：

// @require '../style/index.css'

转换成：

require('../style/index.css');

该loader的使用方法：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['comment-require-loader'],
        // 针对采用了 fis3 CSS 导入语法的 JavaScript 文件通过 comment-require-loader 去转换 
        include: [path.resolve(__dirname, 'node_modules/imui')]
      }
    ]
  }
};

实现如下：

function replace(source) {
    // 使用正则把 // @require '../style/index.css' 转换成 require('../style/index.css');  
    return source.replace(/(\/\/ *@require) +(('|").+('|")).*/, 'require($2);');
}

module.exports = function (content) {
    return replace(content);
};

loader发布

创建独立的库和包，可以使用npm link，将其关联到要测试的项目。
（1）首先在github上建立自己的仓库，克隆到本地，执行npm init初始化项目，编写自己的loader，并提交代码。
（2）在本地仓库的文件夹下执行npm link.
（3）上传loader至npm
1）首先在npmjs.com注册一个npm账号，邮箱验证。
2）执行npm login进行登录
在这里插入图片描述
3）执行npm publish 进行发布

若出现报错
检查仓库是否被设成淘宝镜像库npm config get registry https://registry.npm.taobao.org/若是则设置成原仓库：npm config set registry=http://registry.npmjs.org；再次发布执行npm publish
4）发布成功后即可登录官网查看自己的loader
在这里插入图片描述
5）在项目中通过npm i webpack-loader-test-utils即可引入自己的loader