阅读 1353

从零开始到发布上线,如何自定义一个webpack loader

关于

前两天在使用webpack搭建移动端web的时候,需要使用到flexible.js动态修改html的font-size。考虑到只有几行代码,我想把flexible.js镶嵌到<head>中,同时我希望能够随时修改它的源码,并且最后输出到html中是压缩过后的代码。

由于没有找到类似于我描述的这类插件,我决定自己动手写一个。

什么是webpack loader?

webpack loader 是 webpack 的预处理工具,除了javascript,还可以处理任何静态资源文件。webpack loader 相当于gulp的task,我们可以通过它 将typeScript转换成javascript,可以将图片转换成 data URL等等。

正文:如何编写并发布webpack loader


1. 创建一个github仓库

具体如何创建我就不再赘述了,没创建过的同学到github官网摸索下就会了。仓库名称使用 xxx-loader。


初始化项目

  1. 首先签出你的git仓库
git clone https://github.com/Linnanli/easy-test-loader.git
复制代码
  1. 初始化npm
npm init
复制代码

keywords,author,license这几个是比较关键的,keywords用于关键字检索,author是插件的作者署名,license是你的软件许可证。

  1. 创建.gitignore和.npmignore

因为 node_modules 文件是不提交到git仓库和npm的所以需要创建两个配置文件,让git和npm忽略掉它。

  1. 创建LICENSE软件许可证

你想要使用什么样的许可证书可以到[license]上选择并copy下来。

  1. 最后的目录结构


编写代码

首先创建一个index.js文件,也就是这个项目的入口文件,这个index文件返回一个function,webpack获取到这个方法后就会执行它并传入一些参数。

//一个简单的loader,获取参数并返回给webpack或者下一个loader。
module.exports = function(source){
    return `module.exports = ${source}`);
}

复制代码

上面这个例子就是一个很简单的例子,获取数据并返回。我们可以在这个例子上多加几行代码,让loader在requirejs代码后可以直接返回一个可以内联到html中的javascript。


module.exports = function(source){
    // 替换source字符串中的回车符和换行符,并拼接到<script>标签中
    let result = source.replace(/\n/g, "\\n")
                    .replace(/\r/g, "\\r")
                    .replace(/(.*)/, `module.exports = "<script>$1</script>"`);
    return result;
}

复制代码

更多api和例子可以参考官网。


测试

首先我们需要在本地的webpack中调用到自定义的loader,可以使用npm linkloader链接到项目的node_modules目录下。

  1. easy-test-loader链接到全局环境中
npm link
复制代码

控制台输出

npm notice created a lockfile as package-lock.json. You should commit this file.
up to date in 0.091s
C:\Users\2017-10-16\AppData\Roaming\npm\node_modules\easy-test-loader -> C:\Users\2017-10-16\Documents\github\easy-test-loader

复制代码
  1. 在我们的web项目中链接easy-test-loade,这时候就相当于把其他文件夹下面的easy-test-loader指向本项目下的node_modules文件夹下。
npm link easy-test-loader
复制代码

最后控制台输出

C:\Users\2017-10-16\Documents\github\multi-page-webpack\node_modules\easy-test-loader -> C:\Users\2017-10-16\AppData\Roaming\npm\node_modules\easy-test-loader -> C:\Users\2017-10-16\Documents\github\easy-test-loader
复制代码

最后我们在index.html中测试下easy-test-loader的功能是否正常


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <!-- 在模板中require flexible.js -->
    <%= require('easy-test-loader!common/lib/flexible.js') %>
</head>
<body>
</body>
</html>

复制代码

最后输出的脚本我们可以在chrome中查看


发布到 npm

上面我们已经确保测试通过,接下来就是发布到npm上,然后我们以后就可以通过npm install命令直接下载使用了。

  1. 首先我们要先把代码push到github

添加所有文件

git add -A
复制代码

提交所有更改到暂存区

git commit -m "init"
复制代码

push 到github

git push
复制代码
  1. 发布到npm

在发布之前需要先注册 npm 账号,然后使用npm adduser将账号添加至本地的npm

$ npm adduser
复制代码

将loader发布到npm上(如果发布失败是重名的话,可以在package.json文件中修改name)

npm publish
复制代码
  1. 下载easy-test-loader
npm install easy-test-loader --save-dev
复制代码

安装完成后我们在项目中 require 一下 easy-test-loader 测试下是否代码没有问题就OK啦。


最后

介绍我写的loader插件 [inline-script-loader],支持内嵌到html中并压缩js代码,还支持脚本类型定义。

这里还有一个用到inline-script-loader的小项目,大家可以做下参考 [activity-h5]

如果大家有好的建议可以联系我,有空就star下呗~感谢支持~。

文章分类
前端