srcset-loader embeds webpack config in final bundle

[drwpow]

Versions:

image-webpack-loader 3.4.2
srcset-loader 2.2.2
webpack 3.6.0

This is my loader setup for image files, pairing srcset-loader with image-webpack-loader

rules: [
  {
    test: /\.(gif|png|jpe?g)$/i,
    use: [
      {
        loader: 'srcset-loader',
        options: { placeholder: 20 },
      },
      'file-loader',
      {
        loader: 'image-webpack-loader',
        options: {
          gifsicle: {
            interlaced: false,
          },
          optipng: {
            optimizationLevel: 7, // 0 = light; 7 = heavy
          },
          pngquant: {
            quality: '50-70', // min-max
            speed: 1, // 1 = heavy, slow; 10 = light, fast
          },
          mozjpeg: {
            progressive: true,
            quality: 60, // 0–100
          },
        },
      },
    ],
  },
],

This is what gets output in my minified, production bundle (truncated):

!function(){"use strict";var a=!("undefined"==typeof window||!window.document||!window.document.createElement),i={canUseDOM:a,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:a&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:a&&!!window.screen};void 0!==(o=function(){return i}.call(t,s,t,e))&&(e.exports=o)}()},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/about/office-1.jpg?size=1200w':function(e,t,s){e.exports=s.p+"b217f778359d9336d52e5d336cb37758.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/about/why-communication.jpg?size=1200w':function(e,t,s){e.exports=s.p+"80762ad981e793729ccf31f9e7d6b3b9.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/home/about.jpg?size=1200w':function(e,t,s){e.exports=s.p+"c326908c3e343268ed4b989d3d542eb8.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/home/colophon.jpg?size=1200w':function(e,t,s){e.exports=s.p+"bda3dd6e38f004c766240672be17f118.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/home/services.jpg?size=1200w':function(e,t,s){e.exports=s.p+"b23b6ef61ff996dba199a18253aa9c99.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/services/deliver.jpg?size=1200w':function(e,t,s){e.exports=s.p+"acbbf4dc37da8ba74b268a093b2ea5b4.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/services/discover.jpg?size=1200w':function(e,t,s){e.exports=s.p+"d7bcade20f4789a3c51a83c9d7ec5f94.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/social/envy-labs-animated.gif?size=1200w':function(e,t,s){e.exports=s.p+"ee6a1f3f78d336d9e1577df409ad07fc.gif"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/social/og-about.gif?size=1200w':function(e,t,s){e.exports=s.p+"fa576abe3fc37d446e77ae2f2db66df5.gif"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/social/og-contact.gif?size=1200w':function(e,t,s){e.exports=s.p+"cc450f661eba5dc871db0631fc7dcb94.gif"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/social/og-home.gif?size=1200w':function(e,t,s){e.exports=s.p+"45c1557eabfb1b2853d6fb6fa75af460.gif"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/social/og-services.gif?size=1200w':function(e,t,s){e.exports=s.p+"608d682c6232ebc8cae6b9152a5b91d6.gif"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/social/og-work.gif?size=1200w':function(e,t,s){e.exports=s.p+"e369b49825063e71fe69933b827ac260.gif"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/work/cisco/cisco-cover.jpg?size=1200w':function(e,t,s){e.exports=s.p+"f7cdd3d897c27c51e75623d7eec482fa.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/work/code-school/code-school-cover.png?size=1200w':function(e,t,s){e.exports=s.p+"3e6d47de33e62bad312ef2810729631f.png"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/work/ivy/ivy-cover.jpg?size=1200w':function(e,t,s){e.exports=s.p+"3775e7883fc9f85129f96615042b757f.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/work/orlando-creators/orlando-creators-cover.jpg?size=1200w':function(e,t,s){e.exports=s.p+"db24c283fada3d1a296ba5ddef7f2aa7.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/work/real-thread/real-thread-cover.jpg?size=1200w':function(e,t,s){e.exports=s.p+"c936c585daa0e361e38dde6eb82c4a60.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1200!./assets/work/tech-rocket/tech-rocket-cover.jpg?size=1200w':function(e,t,s){e.exports=s.p+"b5328f2e859779bf82258406ae6d52c0.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1280!./assets/about/office-2.jpg?size=1280w':function(e,t,s){e.exports=s.p+"50b6b22590d8ab4645d9c2d301805997.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1280!./assets/about/office-3.jpg?size=1280w':function(e,t,s){e.exports=s.p+"432c5e95c6d770cd3d99955f15fef0a9.jpg"},'../node_modules/file-loader/dist/cjs.js!../node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}!../node_modules/srcset-loader/lib/resize-loader.js?size=1280!./assets/services/design-mobile.png?size=1280w':function(e,t,s){e.exports=s.p+"fdb910dc84e8dfb720d3833581d0d1c4.png"}

...

As you can see, hundreds of instances of node_modules/image-webpack-loader/index.js?{"gifsicle":{"interlaced":false},"optipng":{"optimizationLevel":7},"pngquant":{"quality":"50-70","speed":1},"mozjpeg":{"progressive":true,"quality":60}}! over and over and over again make it into the final production build. It’s actually taking up a significant portion of my codebase. While this gzips pretty efficiently with all the repetition, I’d rather it not be in the output as it doesn’t seem to be helping users.

The images themselves are optimized, minified, and spit out by srcset-loader just fine, but I’m wondering why all this makes it into my final bundle.

Is there any way to avoid this behavior?

[timse]

do you use namedmodules? Can you give me a less minified version of your output? I assume these are just the Module names.