Webpack：打包图片文件（3）

最新推荐文章于 2024-06-29 23:45:00 发布

黑卡米

最新推荐文章于 2024-06-29 23:45:00 发布

阅读量241

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/Aaren_Jiang/article/details/108853813

版权

Webpack 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文假设你已经看过了前面的2个章节。

应用场景

webpack默认只支持js的打包，遇到图片、vue等不同格式的文件，需要不同的loader去打包。

loader打包图片

打包图片文件前先安装

//对图片文件打包
npm install --save-dev file-loader
//将图片文件转换base64的loader
npm install --save-dev url-loader

打包文件的代码

const path = require('path');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    module: {
        rules: [//文件打包规则
            {
                test: /\.(png|jpg|gif)$/,//打包的文件类型
                use: [
                    {
                        loader: 'url-loader',//使用url-loader对文件打包
                        options: {
                            name:'[name].[ext]',//通过占位符，设置打包后文件的名字，
                            limit: 2048 //多少个字节内把图片转换为base64，1kb=1024byte
                        }
                    }
                ]
            }
        ]
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

引用图片的js代码

import monkeyImg from './monkey.jpg'

var img = new Image()
img.src = monkeyImg

var dom = document.getElementById('root')
dom.append(img)

应用js的html代码，main.js是打包后的文件

<!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>
</body>
<script src="./main.js"></script> 
</html>

黑卡米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack：打包图片文件（3）

本文假设你已经看过了前面的2个章节。应用场景webpack默认只支持js的打包，遇到图片、vue等不同格式的文件，需要不同的loader去打包。loader打包图片打包图片文件前先安装//对图片文件打包npm install --save-dev file-loader//将图片文件转换base64的loadernpm install --save-dev url-loader打包文件的代码const path = require('path');module.exports =.
复制链接

扫一扫

专栏目录