Webpack 解析图片和字体 file-loader url-loader base64格式转换

Webpack解析图片

使用file-loader解析图片资源
在组件中引入并使用

Asset是图片的哈希
Asset Size Chunks Chunk Names
982163fc946587581278ea658d60e8e2.jpg 35.8 KiB [emitted]
reactComp.js 119 KiB 0 [emitted] reactComp

安装file-loader

npm i file-loader@3.0.1 -D

配置webpack

'use strict';

const path = require('path');

module.exports = {
    // 入口 指定入口文件
    entry: {
        reactComp:'./src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        // 指定打包之后的输出目录
        filename: '[name].js'
    },
    // 配置babel解析ES6
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    },
    // 生成模式还是开发模式
    mode: 'production'
};

将图片引入组件文件并打包

"use strict"
import React from 'react'
import ReactDOM from 'react-dom'
import dalao from './images/dalao.jpg'
class Search extends React.Component {
    render() {
        return (
            <div className='search-text'>
                search text
                <img src={dalao} />
            </div>
        )
    }
}
ReactDOM.render(<Search />, document.getElementById('root'))

引入

注意html需要放在dist目录里，否则文件相对路径会有问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./reactComp.js" type="text/javascript"></script>
</body>
</html>

Webpack解析字体

图片和字体的解析都可以使用file-loader处理

安装file-loader并配置webpack

'use strict';

const path = require('path');

module.exports = {
    // 入口 指定入口文件
    entry: {
        reactComp:'./src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        // 指定打包之后的输出目录
        filename: '[name].js'
    },
    // 配置babel解析ES6
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.less$/,
                use:[
                    'style-loader', // 再将样式插入到style标签中
                    'css-loader', // 将css转换成commonjs
                    'less-loader' // 将less文件转换成css文件
                ]
            },
            {
                test:/.(woff|woff2|eot|ttf|otf|otf)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    },
    // 生成模式还是开发模式
    mode: 'production'
};

定义字体

// 定义字体
@font-face {
    font-family: 'SourceHanSerifSC-Heavy';
    src: url(./images/SourceHanSerifSC-Heavy.otf) format('truetype');
}
// 引入字体
.search-text{
    background: aqua;
    font-size: 20px;
    font-family: 'SourceHanSerifSC-Heavy';
}

引入less文件并打包

"use strict"

import React from 'react'
import ReactDOM from 'react-dom'
import './react-comp.less'
class Search extends React.Component {
    render() {
        return (
            <div className='search-text'>
                search text
            </div>
        )
    }
}

ReactDOM.render(<Search />, document.getElementById('root'))

file-loader与url-loader

url-loader也可以处理图片和字体
可以设置较小资源(如小图片和小字体)自动base64

处理成base64可以减少请求数量，虽然相应的会增加js压缩体积，但是相较而言还是减少请求数量开销更小

url-loader

安装url-loader

npm i url-loader@1.1.2 -D

配置webpack

'use strict';

const path = require('path');

module.exports = {
    // 入口 指定入口文件
    entry: {
        reactComp: './src/react-comp.js'
    },
    // 出口 
    output: {
        // 指定输出目录
        path: path.join(__dirname, 'dist'),
        // 指定打包之后的输出目录
        filename: '[name].js'
    },
    // 配置babel解析ES6
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.less$/,
                use: [
                    'style-loader', // 再将样式插入到style标签中
                    'css-loader', // 将css转换成commonjs
                    'less-loader' // 将less文件转换成css文件
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 40 * 1024 // 40k
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    // 生成模式还是开发模式
    mode: 'production'
};

效果:

压缩前

图片为35.8 KiB,js文件为125 KiB

                           Asset      Size  Chunks                    Chunk Names

55e5e80c409f730f0831b06ca3cc3e7a.otf 21.9 MiB [emitted] [big]
982163fc946587581278ea658d60e8e2.jpg 35.8 KiB [emitted]
reactComp.js 125 KiB 0 [emitted] reactComp
Entrypoint reactComp = reactComp.js

压缩后
图片被压缩进js中,js文件为173 KiB
Asset Size Chunks Chunk Names
55e5e80c409f730f0831b06ca3cc3e7a.otf 21.9 MiB [emitted] [big]
reactComp.js 173 KiB 0 [emitted] reactComp
Entrypoint reactComp = reactComp.js