【webpack5修行之道】第2篇：webpack处理图片资源和其他资源

最新推荐文章于 2023-03-11 23:03:45 发布

jay_mw

最新推荐文章于 2023-03-11 23:03:45 发布

阅读量1.9k

点赞数

分类专栏： webpack 文章标签： node.js webpack

本文链接：https://blog.csdn.net/j178202798/article/details/117228348

版权

上一篇： 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

最低0.47元/天解锁文章

jay_mw

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
【webpack5修行之道】第2篇：webpack处理图片资源和其他资源

上篇文章中已经介绍了webpack如何处理css资源和less资源，文章地址：这篇我们介绍webpack怎么打包图片资源和其他资源：在介绍之前，我们先指出一点问题：我们的output输出始终都为built.js，浏览器会对静态资源进行缓存，下次打包的时候如果还为built.js在浏览器这边就需要强制刷新，每次打包都需要强制刷新，这个显然是不对的，用户可不知道什么时候去强制刷新浏览器为了解决这个问题，我们需要修改output.filename的配置const { resolve } =.
复制链接

扫一扫