webpack基础篇（九）：资源解析--使用url-loader-CFANZ编程社区

webpack基础篇（九）：资源解析--使用url-loader

说明

玩转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。

webpack基础篇（九）：资源解析--使用url-loader_html

2、使用url-loader的打包，发现图片不见了，js大小变成了138k，说明base64了。

webpack基础篇（九）：资源解析--使用url-loader_html_02

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>

webpack基础篇（九）：资源解析--使用url-loader_html_03

0 条评论