【webpack5修行之道】第2篇：webpack处理图片资源和其他资源-优快云博客

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117228348

本文介绍了如何使用webpack5打包图片和其他资源，包括使用html-webpack-plugin解决更新问题，url-loader与file-loader解析图片，html-loader处理html中资源，以及配置webpack处理字体图标等其他资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇： webpack5修行之道1- webpack基本概念、处理css+less

这篇我们介绍webpack怎么打包图片资源和其他资源：

在介绍之前，我们先指出一点问题：

我们的output输出始终都为built.js，浏览器会对静态资源进行缓存，下次打包的时候如果还为built.js在浏览器这边就需要强制刷新，每次打包都需要强制刷新，这个显然是不对的，用户可不知道什么时候去强制刷新浏览器

为了解决这个问题，我们需要修改output.filename的配置

const { resolve } = require('path')

module.exports = {
    //入口文件
    entry: './src/index.js',
    //打包后的文件配置
    output: {
        //指定输出的目录,一般采用绝对路径
        path: resolve(__dirname,'build'),
        filename: '[hash:10].built.js'
    },
    module: {
        //loader配置
        rules: [
            {
                //匹配以.css结尾的文件
                test: /\.css$/,
                //单个loader使用loader属性
                //loader: 'css-loader'

                //多个loader处理一个文件，需要使用use
                //use属性的执行顺序为逆序，也就是数组尾->数组首的顺序
                use: ['style-loader','css-loader']
            },
            {
                //匹配以.less结尾的文件
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            }
        ]
    },
    //插件配置
    plugins:[],
    //环境配置
    mode: 'development'
}

这里的hash是值webpack打包的hash值，每次webpack打包都会生成一个hash，[hash:10]的意思就是取hash值的前10位

运行编译命令: npm run build ，编译成功后查看build文件夹

发现已经多了一个js文件，这个时候修改index.html的入口引入文件

这样我们就能把新打包的js文件引入了，但我们每次打包都需要修改script标签来引入新的入口文件，这未免也太麻烦了吧

是的，所以我们这里需要html-webpack-plugin插件来解决这个问题

先下载html-webpack-plugin： npm install -D html-webpack-plugin，下载完毕后修改webpack.config.js将这个插件引入

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //入口文件
    entry: './src/index.js',
    //打包后的文件配置
    output: {
        //指定输出的目录,一般采用绝对路径
        path: resolve(__dirname,'build'),
        filename: '[hash:10].built.js'
    },
    module: {
        //loader配置
        rules: [
            {
                //匹配以.css结尾的文件
                test: /\.css$/,
                //单个loader使用loader属性
                //loader: 'css-loader'

                //多个loader处理一个文件，需要使用use
                //use属性的执行顺序为逆序，也就是数组尾->数组首的顺序
                use: ['style-loader','css-loader']
            },
            {
                //匹配以.less结尾的文件
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            }
       
        ]
    },
    //插件配置
    plugins:[
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    //环境配置
    mode: 'development'
}

html-webpack-plugin会自动帮我们引入入口文件，所以我们需要删除原来的script