Webpack（四）：打包图片资源-CFANZ编程社区

打包图片资源

源码

<!-- src/index.html -->
<body>
    <h1>Hello Lee</h1>
    <img src="./asset/images/01.png">
    <div id="box01"></div>
    <div id="box02"></div>
    <div id="box03"></div>
</body>

/* src/index.less */
#box01{
    width: 100px;
    height: 100px;
    background: url('./asset/images/01.png') no-repeat center center;
    background-size: cover;
}

#box02{
    width: 300px;
    height: 200px;
    background: url('./asset/images/02.png') no-repeat center center;
    background-size: cover;
}

#box03{
    width: 300px;
    height: 300px;
    background: url('./asset/images/03.png') no-repeat center center;
    background-size: cover;
}

// src/index.js 入口
import './index.less';

安装

npm i style-loader css-loader --save-devnpm i less less-loader --save-devnpm i html-webpack-plugin --save-devnpm i url-loader file-loader --save-dev

修改webpack.config.js

// resolve 用来拼接绝对路径的方法
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    /* 入口文件 */
    entry: './src/index.js',

    /* 输出 */
    output: {
        filename: "build.js",
        path: resolve(__dirname, 'build')
    },

    /* loader配置 下载->使用 */
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            },
            {
                /* 处理图片 */
                test: /\.(png|jpg|gif)$/,
                /* 只使用1个loader  */
                loader: 'url-loader',
                /* 配置 */
                options: {
                    limit: 8 * 1024, // 当发现图片小于8kb会将图片base64处理，目的减少请求数量（减轻服务器压力），缺点是图片体积会变大导致文件请求速度变慢
                    name: '[hash:10].[ext]'  /* 重命名图片资源 取hash值前10位加上后缀名 */
                },
                
            }

        ]
    },

    /* plugins配置 下载->引用->使用 */
    plugins: [
        
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),

    ],

    /* 模式 */
    mode: "development" // development || production

}

运行

webpack

问题：处理不了html中的图片资源
解决方法：添加loader

npm i html-loader --save-dev

module: {
    rules: [
        /* CODE */
        ···,
        {
            test: /\.html$/,
            loader: 'html-loader'
        }
    ]
},