说明
玩转webpack课程学习笔记。
使用url-loader
1、安装依赖
npm i url-loader -D
url-loader 也可以用于处理图片和字体。（可以设置较小资源自动 base64）
2、search.js
引入一张小于10k的图片测试一下，logo.png的大小为3.37kb。
import React from 'react';
import ReactDOM from 'react-dom';
import './search.less';
import logo from './images/logo.png';
console.log(logo);
class Search extends React.Component {
render() {
return <div className="search-text">
凯小默的博客
<img src={ logo } />
</div>
}
}
ReactDOM.render(
<Search/>,
document.getElementById('root')
)
3、webpack.config.js配置
把之前的file-loader改为url-loader。
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'production',
module: {
rules: [
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240 // 限制为10k，小于就会base64
}
}
]
},
]
}
};4、npm run build打包测试
1、使用file-loader的打包，发现图片是在的，没有base64。
2、使用url-loader的打包，发现图片不见了，js大小变成了138k，说明base64了。
5、浏览器打开index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./search.js"></script>
</body>
</html>
