【webpack5】修改输出文件目录

待解决问题：webpack打包生成的样式、图片等在同级目录。希望按目录输出资源。

修改打包输出资源的路径，使资源在各自不同的目录下输出，方便管理。

在output中修改输出文件的目录

如果如上修改，还是会把所有资源输出到js里；
修改filename就可以将入口文件输出到指定目录

 //出口
 output:{
     //文件的输出路径
     //__dirname node.js的变量，代表当前文件的文件夹目录
     path:path.resolve(__dirname,'dist'),//绝对路径
     //入口文件的输出名称
     filename:'js/main.js'
 },

图片资源则可以在loader中配置generator，指定输出目录。

 {
     test: /\.(png|jpe?g|gif|webp|svg)/,
     type: 'asset',
     parser: {
         dataUrlCondition: {
         //小于10kb的图片转base64
         // 优点：缺少请求数量；缺点：体积会变大
         maxSize: 10 * 1024 // 10kb
         },
     },
     generator: {
         //输出图片名字
         filename: 'static/images/[hash][ext][query]'
     }
 }

这样进行打包就可以看到资源去到了该去的位置。

hash值导致文件名较长，在后续使用时可能导致文件体积较大，可以如下指定hash值取10位。

       generator: {
           //输出图片名字
           filename: 'static/images/[hash:10][ext][query]'
       }