webpack（5）清空上次打包内容和修改输出文件目录

最新推荐文章于 2024-06-13 17:08:26 发布

weixin_45750073

最新推荐文章于 2024-06-13 17:08:26 发布

阅读量517

点赞数 1

CC 4.0 BY-SA版权

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_45750073/article/details/136296886

清空上次打包内容

每次打包开始前都要手动清空上次打包的内容，非常麻烦，webpack5有个参数可以设置自动清空上次打包的内容。
在output中增加clean属性，设置为true即可。
在这里插入图片描述

修改文件输出目录

不同的文件全部打包到一个dist文件夹时，会显得很杂乱，不同内容打包到不同的文件夹就很有必要，让人一目了然，打包目录结构又很有层次感。

1、比如想要入口的js文件打包到dist目录下的js文件夹中，就在output的filename（输口文件路径前面加上js文件目录），如果在path配置那里改成’dist/js’，那所有的打包文件都会集中在dist/js目录下，这是输出文件的根目录
在这里插入图片描述
2、要想图片文件打包到dist/static/images目录下，需要进行下面的配置。

// 不设置图片的处理规则时，都会默认使用file-loader进行处理图片
 {
      test: /\.(png|jpe?g|gif|svg)$/,
      type: "asset",//表示使用内置的url-loader处理
      parser: {
          dataUrlCondition: {
              maxSize: 10 * 1024,//小于10kb的使用url-loader进行处理
          }
      },
      // 自定义文件名称
      generator: {
          // 输出图片名称,hash代表生成的哈希值，
          // 是唯一的，保证名称的唯一性,冒号后面的数字表示取哈希值的多少位，
          // 不设置表示默认20位数
          // ext表示图片的后缀名，
          // query表示?后面的参数
          filename:"static/images/[hash:10][ext][query]"
      }
  }

打包后：
加粗样式