Files in `srcset` are not loaded.

siakaramalegos commented 5 years ago

I'm submitting a bug report I'm submitting a feature request

I feel like this is a bug since srcset is valid HTML, but I kept both bug and feature request depending on how you want to handle it.

Webpack version: 4.20.2

HTML-Loader version: 0.5.5

Please tell us about your environment: OSX 10.12.6

Current behavior: Source HTML like the following:

<picture>
  <source
    type="image/webp"
    srcset="./images/300_sofa_pug.jpg.webp 300w,
      ./images/600_sofa_pug.jpg.webp 600w" />
  <img
    srcset="./images/300_sofa_pug.jpg 300w,
      ./images/600_sofa_pug.jpg 600w"
    src="./images/600_sofa_pug.jpg"
    sizes="(max-width: 320px) 280px,
      (max-width: 640px) 580px,
      1000px"
    alt="puppy in a striped shirt" />
</picture>

Builds to:

<picture>
  <source type=image/webp srcset="./images/300_sofa_pug.jpg.webp 300w, ./images/600_sofa_pug.jpg.webp 600w" />
  <img srcset="./images/300_sofa_pug.jpg 300w, ./images/600_sofa_pug.jpg 600w" src=/images/600_sofa_pug.b00758fdf2078ef0fc04c9f3941b8db5.jpg
    sizes="(max-width: 320px) 280px,
      (max-width: 640px) 580px,
      1000px" alt="puppy in a striped shirt" />
</picture>

and only the file listed in src is loaded by html-loader and processed (by other loaders).

Expected/desired behavior: It should require the image files listed in srcset so the build file would look something like this:

<picture>
  <source type=image/webp srcset="./images/300_sofa_pug.d00yyyfdf2078ef0fc04c9f3941b8db5.jpg.webp 300w, ./images/600_sofa_pug.c00xxxfdf2078ef0fc04c9f3941b8db5.jpg.webp 600w" />
  <img srcset="./images/300_sofa_pug.e00zzzfdf2078ef0fc04c9f3941b8db5jpg 300w, ./images/600_sofa_pug.f00aaafdf2078ef0fc04c9f3941b8db5.jpg 600w" src=/images/600_sofa_pug.b00758fdf2078ef0fc04c9f3941b8db5.jpg
    sizes="(max-width: 320px) 280px,
      (max-width: 640px) 580px,
      1000px" alt="puppy in a striped shirt" />
</picture>

And all files listed in srcset are loaded by html-loader for processing (by another loader). I just put in fake hashes for illustrative purposes.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration. See above code sample - just put it in an HTML file.
What is the expected behavior? see above
What is the motivation / use case for changing the behavior? To load files used in valid HTML attributes.
Browser: all
Language: HTML

netdjw commented 5 years ago

Same issue here.

webpack 4.27.1 html-loader 0.5.5

under Windows 10

I'm using this webpack cofing:

      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            interpolate: true,
            attrs: ['img:src', ':srcset']
          }
        }
      }

alexander-akait commented 5 years ago

Feel free to send a PR

coursar commented 5 years ago

@siakaramalegos you can npm install from PR that already has support for requested feature

siakaramalegos commented 5 years ago

Any update on this? It looks like a PR was opened, but hasn't been addressed yet.

tim1016 commented 5 years ago

Same issue here. srcset images are not loaded @coursar, current version were install using npm i webpack (versions are: "webpack": "^4.39.2", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.8.0") Using on Linux.

Do I use the PR version like the following? npm install webpack/webpack.git#pull//head

Am I wrong somewhere.

yinjun1991 commented 4 years ago

Same issue here.

webpack 4.27.1 html-loader 0.5.5

under Windows 10

I'm using this webpack cofing:
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: {
            interpolate: true,
            attrs: ['img:src', ':srcset']
          }
        }
      }

No help. Will throw an Error: Can`t resolve './images/300_sofa_pug.jpg.webp 300w, ./images/600_sofa_pug.jpg.webp 600w' Because html-loader will not parse the srcset syntax.

coursar commented 4 years ago

Same issue here. srcset images are not loaded @coursar, current version were install using npm i webpack (versions are: "webpack": "^4.39.2", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.8.0") Using on Linux.

Do I use the PR version like the following? npm install webpack/webpack.git#pull//head

Am I wrong somewhere.

Docs: https://docs.npmjs.com/files/package.json#git-urls-as-dependencies Sample: npm i -D git+https://github.com/webpack-contrib/html-loader#pull/192/head

Use it with caution: it's unmaintained

siakaramalegos commented 4 years ago

I've been using html-loader-srcset instead https://www.npmjs.com/package/html-loader-srcset

webpack-contrib / html-loader

Files in `srcset` are not loaded. #188