最初に登場したこの記事デンバー
上の
二日WebPACKのウェブ構造を使用して、移動の終了前に、それを使用する必要があるflexible.js動的にHTMLフォントサイズを変更します。コードのわずか数行のことを考えると、私がしたいflexible.js挿入<head>途中、私は、HTMLが圧縮された後、コードにそのソースコード、および最終的な出力を変更するためにいつでもできるようにしたいです。
私が説明したように、これらのプラグインが見つからないので、私は自分自身書くことにしました。
WebPACKのローダーとは何ですか？
WebPACKのローダーですWebPACKの前処理ツールは、JavaScriptに加えて、任意の静的リソースファイルを扱うことができます。WebPACKのタスクを飲み込むと同等ローダは、私たちはそこを通って活字体は、画像に変換することができjavascriptの変換することができdata URL、など。
本体：どのように書くとWebPACKのローダを公開します
githubのリポジトリを作成します。1.
私は詳細には触れません特定を作成する方法ではなく、学生が作成する必要がありましたgithubのを公式サイト模索することになるで。使用XXX-ローダーに倉庫名。
プロジェクトを初期化します
- まず、あなたのgitリポジトリをチェックアウト
git clone https://github.com/Linnanli/easy-test-loader.git
- 初期NPM
npm init
キーワード、著者、これらがより重要ですライセンス、キーワード検索で使用するキーワードは、プラグイン署名されているの著者、ライセンスソフトウェアライセンスを。
- .gitignoreと.npmignoreを作成します
gitのとNPMはそれを無視してのgitリポジトリとNPMの必要性が、2つの構成ファイルを作成するので、ファイルがnode_modulesに提出されていませんので。
- ソフトウェアライセンスのライセンスを作成します。
あなたは可能にするために、何をすることができます使用したい[ライセンス]を選択の上や下にコピーします。
- 最終的なディレクトリ構造
コードを記述
首先创建一个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下呗感谢支持。
