# 七.css
# 安装
package.json
{
"name": "3.babel-loader",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"less": "^3.9.0",
"loader-utils": "^1.2.3",
"mime": "^2.4.1",
"schema-utils": "^1.0.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 文件
loaders/css-loader.js
function loader(source) {
let reg = /url\((.+?)\)/g
let pos = 0
let current
let arr = ["let list =[]"]
while ((current = reg.exec(source))) {
let [matchUrl, g] = current
console.log(matchUrl, g)
let last = reg.lastIndex - matchUrl.length
arr.push(`list.push(${JSON.stringify(source.slice(pos, last))})`)
pos = reg.lastIndex
arr.push(`list.push('url('+require(${g})+')')`)
}
arr.push(`list.push(${JSON.stringify(source.slice(pos))})`)
arr.push(`module.exports=list.join('')`)
console.log(arr.join("\r\n"))
return arr.join("\r\n")
}
module.exports = loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
loaders/style-loader.js
let loaderUtils = require("loader-utils")
function loader(source) {
//我们可以在style-loader中导出一个脚本
let str = `
let style=document.createElement('style');
style.innerHTML=${JSON.stringify(source)};
document.head.appendChild(style)
`
return str
}
//在style.loader上写pitch
//style-loader less-loader!css-loader!/ ./index.less
loader.pitch = function(remainingRequest) {
console.log(remainingRequest)
let str = `
let style=document.createElement('style');
style.innerHTML=require(${loaderUtils.stringifyRequest(
this,
"!!" + remainingRequest
)});
document.head.appendChild(style)
`
return str
}
module.exports = loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
src/index.less
@color: red;
body {
background: @color;
background: url("./logo.png") no-repeat;
}
1
2
3
4
5
2
3
4
5
# 打包
npx webpack
1
打开 index.html 可以看到图片