# Webpack打包图片资源

npm i file-loader url-loader -D  

// file-loader 解决CSS等文件中的引入图片路径问题
// url-loader 当图片小于 limit 的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝

// 目录结构
src
    --css
        index.scss
    --imgs
        webpack.png
    index.html
    index.js
webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'app.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        }, {
            // 处理图片资源
            test: /\.(jpg|png|bmp|gif|svg)$/,
            // 下载url-loader,file-loader
            loader: 'url-loader',
            options: {
                // 图片大小小于8kb ，就会被base64处理
                // 优点: 减少请求数量（减轻服务器压力）;
                // 缺点：图片体积会变大（文件请求速度更慢）
                limit: 8 * 1024,
                // 默认使用es6模块化解析，html-loader引入的图片是commonjs
                // 解析会出现[Object Moudle]
                // 解决方式：关闭url-loader的es6模块化。使用commonjs解析
                esMoudle: false,
                // 给图片进行重命名
                // [hash:10]取图片的hash的前10位
                // [ext]取文件原来扩展名
                name:'[hash:10].[ext]',
                outputPath: 'imgs' // 输出到imgs目录 
            }
        }, {
            test: /\.html$/,
            // 处理html文件的img图片（负责引入img 从而能被url-loader处理）
            // 下载 html-loader
            loader: 'html-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

module.exports = config;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack打包图片资源</title>
</head>
<body>
    <div class="packageimage"></div>
    <img src="./imgs/webpack.png">
</body>
</html>

# js中引入图片

let logo=require('./images/logo.png');
let img=new Image();
img.src=logo;
document.body.appendChild(img);

# css中引入图片

.logo{
    width:355px;
    height:133px;
    background-image: url(./images/logo.png);
    background-size: cover;
}

← webpack打包Html devServe →