从零开始到发布上线，如何自定义一个webpack loader
本文首发在 掘金
关于
前两天在使用webpack搭建移动端web的时候,需要使用到flexible.js动态修改html的font-size。考虑到只有几行代码，我想把flexible.js镶嵌到中,同时我希望能够随时修改它的源码,并且最后输出到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字符串中的回车符和换行符,并拼接到"`);
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的功能是否正常
<html lang="en">
<head>
<meta charset="utf-8">
<title>Documenttitle>
<%= 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下呗感谢支持。