欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用webpack打包图片

程序员文章站 2022-07-14 20:25:08
...

使用webpack打包图片

首先得创建文件初始化
找到文件目录

E:\workspace\0821\img_deom>npm init -y

这样目录文件会多出package.json文件
成功之后去下载组件

E:\workspace\0821\img_deom>npm i -D webpack webpack-cli
E:\workspace\0821\img_deom>npm i -D url-loader file-loader

下载成功之后目录如下

img_deom/
node_modules/
package.json
package-lock.json

在img_deom创建webpack.config.js
和src/img

在img放入图片,我这里放入了两张大小不同的图片,等会方便测试

img_deom/
scr/img/
lg-cat.png
little-cat.png

在img创建index.js,编写代码

import cat1 from "./lg-cat.png";
import cat2 from "./little-cat.png";


var lgCat = document.createElement("img");

lgCat.src = cat1;

document.body.appendChild(lgCat);

var smCat = document.createElement("img");

smCat.src = cat2;

document.body.appendChild(smCat);

编写webpack.config.js

var path = require('path');
module.exports = {
    entry:'./src/img/index.js',
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'app.js'

    },
    module:{
        rules:[
            {
                test:/\.(png|jpe?g|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8000
                        }
                    }
                ]
            }
        ]
    },
    mode:'production'
}

这时目录下多了dist目录下有名为app.js
这就证明已经打包完成
接下来创建main.html文件引进app.js就可以看到效果

img_deom/
dist/
img1.jpg
app.js
main.html
node_modules/
src/
img/
index.js
img1,jpg
img2.jpg
package.json
package-lock.json

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

就能看到效果
使用webpack打包图片

相关标签： 前端 node.js webpack

上一篇： webpack 之打包图片

下一篇： 牛客网--两个栈模拟队列

推荐阅读