Webpack5 处理图片资源、图标资源、修改输出目录、清空上一次打包的所有文件

1. 处理图片资源

 Webpack5 已经将两个 Loader【file-loader 和 url-loader 】功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 。

 优化 ---> 小图片转化为base64

小图片可以转换为base64，就不用再发起请求，且大1KB不会有什么影响
大图片不转，因为图片转换为base64格式sise会变很大  eg：4.85KB-->6.5KB、194KB-->259KB

 配置文件 webpack.config.js：

// 图片转换为base64
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
                dataUrlCondition: {
                    // 小于10KB图片会转base64,  优点:减少请求数量  缺点:体积变大
                    maxSize: 10 * 1024 // 10kb
                }
            }
        }
    ]
},

再次打包 npx webpack，会发现小于10KB的图片不会再打包，转化成了base64形式

 2.  修改输出文件目录

修改之前所有文件在同一个目录下：

 修改之后：每个模块有相应的目录

具体步骤：修改配置文件 webpack.config.js：

// 输出
output: {
        // __dirname  nodejs的变量,代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist/"),   //所以文件的输出绝对路径
        filename: 'static/js/main.js'   //入口文件的打包输出名称
},
// 图片加载器
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: 'asset',
            parser: {
                dataUrlCondition: {
                    // 小于10KB图片会转base64,  优点:减少请求数量  缺点:体积变大
                    maxSize: 15 * 1024 // 4kb
                }
            },
            generator: {
                // 输出图片名字
                filename: 'static/images/[hash:10][ext][query]'   //[hash:10] 表示hash值只取10位
            }
        }

    ]
},

 3. 自动清空上次打包内容

只需要在配置文件output 中设置 clean 为 true

    // 输出
    output: {
        // __dirname  nodejs的变量,代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist/"),   //所以文件的输出绝对路径
        filename: 'static/js/main.js',   //入口文件的打包输出名称
        // 自动清空上次打包内容  原理:在打包前,将path整个目录内容清空,在进行打包
        clean:true,
    },

4. 处理字体图标资源

1.下载图标资源： iconfont-阿里巴巴矢量图标库

2. 把图标放入项目中，并修改文件引入路径

 3. 引入 iconfont.css 文件

import './css/iconfont.css'

4. 修改输出目录

module: {
    rules: [
        // 图标
        {
            test: /\.(ttf|woff2?)$/,
            type: 'asset/resource',
            generator: {
                // 输出名字
                filename: 'static/media/[hash:10][ext][query]'
            }
        }

    ]
},

5.使用

 <span class="iconfont icon-shequweixiu"></span>

5. 处理其他资源

// 其他资源
{
    test: /\.(map3|map4|avi)$/,   //在这里加上就可以统一处理
    type: 'asset/resource',
    generator: {
    // 输出名字
    filename: 'static/media/[hash:10][ext][query]'  
    }
}