加载文件地址
文件结构
.
├── dist/
├── img/
├── node_modules/
├── index.css
├── index.html
├── index.js
├── package.json
└── webpack.config.js
图片下载
webpack.config.js
module.exports = {
mode : 'development',
entry : './index.js',
output : {
filename : 'bundle.js',
path : __dirname + '/dist',
publicPath : './dist/', // 公开文件相对index.html的地址
},
module : {
rules : [
// CSS loader
{
// 以.css结尾的文件
test : /\.css$/i,
use : [ 'style-loader', 'css-loader' ],
},
// 图片 loader
{
// 以.jpg、.jpeg、.png或.gif结尾的文件
test : /\.(jpg|jpeg|png|gif)$/i,
use : [
{
loader : 'file-loader',
},
],
},
],
},
};
index.js
import './index.css';
import src from './img/love.jpg';
let img = document.createElement('img');
img.src = src;
document.body.appendChild(img);
index.css
body {
background: url(./img/love.gif);
}
img {
max-width: 20em;
}
index.html
<body>
<script src="dist/bundle.js"></script>
</body>
直接转换图片数据
文件结构
.
├── dist/
├── img/
├── node_modules/
├── index.html
├── index.js
├── package-lock.json
├── package.json
└── webpack.config.js
webpack.config.js
module.exports = {
mode : 'development',
entry : './index.js',
output : {
filename : 'bundle.js',
path : __dirname + '/dist',
publicPath : './dist/',
},
module : {
rules : [
{
test : /\.(jpg|png|jpeg|gif)/i,
use : [
{
loader : 'url-loader',
options : {
limit : 60 * 1024, // byte
},
},
],
},
],
},
};
index.html
<meta charset="UTF-8">
<style>
.container {
font-size: 0;
}
img {
width: 33.3333333%
}
</style>
<div class="container"></div>
<script src="dist/bundle.js"></script>
index.js
import a1 from './img/a1.jpg';
import b1 from './img/b1.jpg';
import c1 from './img/c1.jpg';
import a2 from './img/a2.jpg';
import b2 from './img/b2.jpg';
import c2 from './img/c2.jpg';
import l1 from './img/love.jpg';
import l2 from './img/love.gif';
let container = document.querySelector('.container');
let body = document.body;
function append (src, parent) {
let img = document.createElement('img');
img.src = src;
parent.appendChild(img);
}
append(a1, container);
append(b1, container);
append(c1, container);
append(a2, container);
append(b2, container);
append(c2, container);
append(l1, body);
append(l2, body);
package.json
{
"name": "21.x",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"url-loader": "^1.1.2",
"webpack": "^4.28.1",
"webpack-cli": "^3.1.2"
}
}
Q: 使用正常指定地址和data URL在传输上有什么区别?
A: 区别在于前者需要传输,后者无需传输,因为前者记录着资源位置,后者就是资源本身(资源数据)。
登录后评论