手写webpack(二)增加loader功能
时间:2020-03-27
本文章向大家介绍手写webpack(二)增加loader功能,主要包括手写webpack(二)增加loader功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上篇文章我们实现了一个简易版的webpack,可以打包我们的js代码,但是还不能处理我们的 css、less、scss、图片等,这些都是需要loader和plugin来处理,所以,为了打包器更强大,需要增加loader
和plugin
的支持,接着我们就手写实现一个简单的loader
定义一个index.less文件
body{
background: red;
}
在index.js文件里面引入
let str = require('./a.js')
require('./index.less')
console.log(str)
'./src/a.js'
手写两个loader
less.loader和style-loader
less-loader.js
let less = require('less')
function loader(source){
let css = ''
//将源码用less渲染
less.render(source,function(err,c){
css = c.css
})
css = css.replace(/\n/g, '\\n') //将\n 转换成\\n,就是换行了,不然代表转义
return css
}
module.exports = loader
这个loader的主要作用是将我们编写的less文件渲染成浏览器可识别的css文件
style-loader.js
//创建一个style标签,将转换的源码插入到页面的head部分
function loader(source){
//创建style标签
//style.innerHTML = ${JSON.stringify(source)} 将css源码转成一行
let style = `
let style = document.createElement('style')
style.innerHTML = ${JSON.stringify(source)}
document.head.appendChild(style)
`
return style
}
module.exports = loader
这个文件的主要作用是创建一个style标签,将转换好的less源码插入到页面的head部分
在webpack.config.js里面引用这两个loader
let path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
module:{
rule:[
{
test: /\.less$/,
use:[
path.resolve(__dirname,'loader','style-loader'),
path.resolve(__dirname,'loader','less-loader')
]
}
]
}
}
我们在webpack引入了两个loader,现在就需要根据路径来读我们写的less文件,并将less文件源码传给这两个loader来处理,在我们上一篇的基础上来写。
getSource(modulePath){ //读源码
//拿到模块内容
let content = fs.readFileSync(modulePath,'utf8')
//拿到配置的loader
let rules = this.config.module.rules
//拿到每个规则来处理
for(let i = 0; i< rules.length; i++){
let rule = rule[i]
let {test,use} = rule
let len = use.length-1
//如果当前路径和规则匹配 那就说明这个模块是需要loader来转化的
if(test.test(modulePath)){
//因为loader解析是从右往左,所有先从最后一个loader来处理use[len]
function normalLoader(){
//拿到loader对应的函数
let loader = require(use[len--])
//将源码内容通过loader处理
content = loader(content)
//递归处理所有的loader
if(len>=0){
normalLoader()
}
}
normalLoader()
}
}
return content
}
判断我们当前路径和我们要处理的路径是否匹配,比如index.less和我们需要处理的less文件就是匹配的,这个时候就需要调用我们写的loader递归处理。
处理的最终结果如图所示:
原文地址:https://www.cnblogs.com/lyt0207/p/12583828.html
- 【翻译】A Next-Generation Smart Contract and Decentralized Application Platform
- asp.net回调javascript
- Oracle9i第2版中的UNT_FILE提高了文件输入/输出(I/O)功能。
- Python 工匠:善用变量来改善代码质量
- sql数据库打包部署安装
- 打包并自动安装sql数据库
- SQL 2008 r2 安装提示 visual studio 2008 版本错误解决方法
- mssql 获取表空间大小
- SQLite 带你入门
- Windows下Nginx+Mysql+Php(wnmp)环境搭建
- LNMP源码编译安装(centos7+nginx1.9+mysql5.6+php7)
- MySQL SHOW PROFILE(剖析报告)的查看
- PHP连接MySQL数据库的三种方式(mysql、mysqli、pdo)
- 如何查看已经安装的nginx、apache、mysql和php的编译参数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- idea连接docker实现一键部署
- redis的过期策略和内存淘汰机制
- Redis主从复制原理总结
- redis cluster 的核心原理分析:gossip 通信、jedis smart 定位、主备切换
- SpringBoot自动装配原理解析
- 什么是CICD?
- Zabbix 5.0 LTS新功能一览
- 获取电脑真实的IP地址,忽略虚拟机等IP地址的干扰
- K8S系列之K8S集群之Master节点部署
- Kafka集群搭建
- Kafka的实现细节
- CentOS7下安装Elasticsearch-7.3.2和Elasticsearch-head
- spring boot oauth2 取消认证
- 日志级别记录规范
- 搭建K8S集群之node节点部署