从零开始到发布上线，如何自定义一个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。

初始化项目

首先签出你的git仓库

git clone https://github.com/Linnanli/easy-test-loader.git

初始化npm

npm init

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

创建.gitignore和.npmignore

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

创建LICENSE软件许可证

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

编写代码

首先创建一个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 link将loader链接到项目的node_modules目录下。

将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

在我们的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命令直接下载使用了。

首先我们要先把代码push到github上

添加所有文件

git add -A

提交所有更改到暂存区

git commit -m "init"

push 到github

git push

发布到npm

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

$ npm adduser

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

npm publish

下载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下呗~感谢支持~。