webpack5零基础入门-8清空前次打包文件与处理图标字体资源

Z编程

已于 2024-03-15 12:29:55 修改

阅读量1k

点赞数 28

分类专栏： webpack 文章标签：前端 javascript 开发语言

于 2024-03-15 12:29:31 首次发布

本文链接：https://blog.csdn.net/weixin_45636198/article/details/136736348

版权

webpack 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.配置output中的clean属性为true

 output: {
        /**文件输出路径 绝对路径*/
        //__dirname 表示当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),//所有文件的输出目录
        /**文件名 */
        filename: 'static/js/dist.js',//入口文件输出文件名
        clean: true,//在打包前将path整个目录内容情况

    },

即可以在打包前自动清空path目录

2.下载素材

3.引入样式和字体

4.运行npx webpack打包

可以看到dist中已经有了图标相关内容

5.添加字体图标相关配置

/**图标字体相关配置 */
            {
                test: /\.(ttf|woff2?)$/,//只对ttf、woff2资源起作用
                type: 'asset/resource',//加上/resource表示将资源原封不动的打包出来
                generator: {
                    filename: "static/media/[hash][ext][query]"
                }
            }

与图片配置类似，不同的是type变为asset/resource

表示将资源不进行转换直接打包

再配置generator将filename变成"static/media/[hash][ext][query]"

即可将字体图标相关文件打包到

static下的media目录中

执行npx webpack

6.在html文件中使用图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <script src="../../dist/static/js/dist.js"></script>
    <h1>hell webpack</h1>
    <!-- <div class="red"></div>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div> -->
    <span class="iconfont icon-tianjia"></span>

</body>
</html>

Z编程

关注

28
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
webpack5零基础入门-8清空前次打包文件与处理图标字体资源

再配置generator将filename变成"static/media/[hash][ext][query]"与图片配置类似，不同的是type变为asset/resource。可以看到dist中已经有了图标相关内容。即可以在打包前自动清空path目录。static下的media目录中。表示将资源不进行转换直接打包。即可将字体图标相关文件打包到。执行npx webpack。
复制链接

扫一扫