为啥要撸个loader
正所谓一时撸码一时爽,一直撸码一直爽!随着需求的多样化,有时候webpack现有的loader已经不能满足我们需求,我们需要更加定制化的loader!
loader撸之前的准备
loader是webpack的一部分,webpack的思想的一切皆模块,loader可以看作是webpack的一种模块!
webpack源码为loader定制好了规则,我们只需要按照现有的规则撸自己的loader就好了
具体可以看webpack文档,上面有详细的介绍,知难行易,有兴趣的童鞋可以去看看!
确定需求,这个是最重要的,一切基于需求入手,今天,我们撸个简单的loader,通过配置webpack中的loader,给html文件加入js链接,js文件可以有很多作用,比如今天要更新,那么这个js用于解决一些发布更新,暂停公告等需求
loader开撸
啥也不说了,直接上源码!
html-addJs-loader.js
const loaderUtils = require('loader-utils'); // 撸loader场用的工具
const validateOptions = require('schema-utils');// 撸loader场用的工具
const schema = {
type: 'object',
properties: {
js: {
type: 'string',
},
},
required: [ 'js' ],
};
// source是webpack调用我们的loader,传进来的的文件流,因为我们这里匹配html文件,所以这里传进来的是所有符合条件的html文件解析后的字符串
module.exports = function (source) {
const options = loaderUtils.getOptions(this); //获取的是我们loader的配置项
validateOptions(schema, options, 'Loader options');//检验loader配置项是否符合要求
let { js } = options;
js = loaderUtils.stringifyRequest(this, js);//把loader要引入的js路径转化成相对路径,不同于fs.readFileSync
const jsStr = `<script src=${js}></script>`;
const _source = source.replace('{{__scirpt__}}', jsStr)
return _source;
}
webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
var HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin;
module.exports = {
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9020,
hot: true
},
entry: path.join(__dirname, './index.js'),
output: {
path: path.join(__dirname, "dist"),
filename: 'bundle.js',
},
module: {
rules: [{
test: /\.html$/,
use: [
{
loader: 'html-loader'
},
{
loader: 'html-addJs-loader', // 我们的loader名字
options: {
js: path.resolve(__dirname, 'loaderJs/replaceJs/index.js'),
},
}
]
}]
},
resolveLoader: {
modules: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'src/loaders')] //自定义loader路径引入
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
new CopyWebpackPlugin([
{
from: 'loaderJs',
to: path.resolve(__dirname, 'dist/loaderJs'),
}
]),
new HotModuleReplacementPlugin()
] // 如果js路径是文件下的路径,需要把js这个打包到dist相同目录下,如果js路径是cdn等外网链接,则不需要打包到dist同目录下
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 这里是 body 内容 -->
<div>恭喜你成功了</div>
{{__scirpt__}}
</body>
</html>
这里写自己的脚手架也有点偷懒了,直接 {{scirpt}}替代,html-addJs-loader也可以用js2 = fs.readFileSync(js),然后用正则匹配到 </body>,再把js2用正则加入。但是这样也会引发一个问题,如果是多个html文件,所以我们需要在option配置项中指定html文件,同时修改html-addJs-loader,无疑增加了很多工作量,虽然通用性更强!这就相当于通用性和简单性权衡,仁者见仁啦!
当你页面上出现这个图的时候,恭喜你成功啦!
结语
恭喜你,现在你也能撸个属于自己的loader了,一时写代码一时爽,一直写代码一直爽!
源码地址:传送门