上一篇： webpack5修行之道1- webpack基本概念、处理css+less
这篇我们介绍webpack怎么打包图片资源和其他资源：
在介绍之前，我们先指出一点问题：
我们的output输出始终都为built.js，浏览器会对静态资源进行缓存，下次打包的时候如果还为built.js在浏览器这边就需要强制刷新，每次打包都需要强制刷新，这个显然是不对的，用户可不知道什么时候去强制刷新浏览器
为了解决这个问题，我们需要修改output.filename的配置
const { resolve } = require('path')ports = {//入口文件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，下载完毕后修改fig.js将这个插件引入
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')ports = {//入口文件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本文发布于:2024-01-29 11:59:57，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170650080215124.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
