本文主要是介绍【webpack5修行之道】第2篇：webpack处理图片资源和其他资源，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
上一篇： 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
删除后index.html如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta na这篇关于【webpack5修行之道】第2篇：webpack处理图片资源和其他资源的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
