天天看點
傳回

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

  1. 安裝file-loader 
npm i [email protected] -D
  1. 配置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'
};
  1. 将圖檔引入元件檔案并打包 
"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'))
  1. 引入

注意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處理

  1. 安裝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'
};
  1. 定義字型 
// 定義字型
@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';
}
  1. 引入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

  1. 安裝url-loader 
npm i [email protected] -D
           
'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]

reactComp.js 125 KiB 0 [emitted] reactComp

Entrypoint reactComp = reactComp.js

相關版本檔案 

{
  "name": "02beginning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": " webpack "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  }
}
           
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
css 5e html 開發模式 3c
上一篇: 阿裡巴巴菜鳥綠色通道操作指南
下一篇: Python必知詞彙：應用程式接口

繼續閱讀