说明
玩转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>
