# 五.file-url
# 安装
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",
"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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# loader
loaders/file-loader.js
let loaderUtils = require("loader-utils")
function loader(source) {
let filename = loaderUtils.interpolateName(this, "[hash].[ext]", {
content: source,
})
console.log(source)
this.emitFile(filename, source)
return `module.exports="${filename}"`
}
loader.raw = true //二进制
module.exports = loader
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
loaders/url-loader.js
let loaderUtils = require("loader-utils")
let mime = require("mime")
function loader(source) {
let { limit } = loaderUtils.getOptions(this)
if (limit && limit > source.length) {
return `module.exports="data:${mime.getType(
this.resourcePath
)};base64,${source.toString("base64")}"`
} else {
return require("./file-loader").call(this, source)
}
}
loader.raw = true
module.exports = loader
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
# 文件
图片
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>
<script src="./build.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 配置
webpack.config.js
let path = require("path")
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "build.js",
path: path.resolve(__dirname, "dist"),
},
resolveLoader: {
modules: ["node_modules", path.resolve(__dirname, "loaders")],
},
watch: true,
devtool: "source-map",
module: {
rules: [
// {//file-loader会根据路径
// test:/\.png$/,
// //目的就是根据图片生成一个md5 发射到dist目录下，file-loader还会返回当前的图片
// use:'file-loader'
// },
{
test: /\.png$/,
use: {
loader: "url-loader",
options: {
limit: 200 * 1024,
},
},
},
],
},
}
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
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 打包
npx webpack
1
运行 index.html 可以看到图片
← 四.banner 六.less-css →