[Feature] Add an extract option #385

GMartigny · 2021-05-21T13:56:24Z

A common use-case for this loader is to use it to generate an HTML file. Many users use this in tandem with the extract-loader. Sadly, extract-loader is very outdated and seems unmaintained.

Feature Proposal

html-loader should support an option to output the HTML code it create into a new file.
It could also output the CSS code, but this is maybe out of scope for this loader.

Feature Use Case

Users can use a .html as entry. This means that they'll need the html-loader to handle the HTML code. Having an extract option would allow to output the HTML code into a new file in the destination folder, which is convenient for continuous deployment.

The text was updated successfully, but these errors were encountered:

alexander-akait · 2021-05-21T13:58:21Z

Yes, but I think we can implement extract option for this loader

GMartigny · 2021-05-22T09:32:04Z

Even better !
Should I change the issue description ?

alexander-akait · 2021-05-22T13:13:50Z

Yes, let's change it

shoaibsharif · 2021-08-28T05:55:43Z

Very interested to see this feature. I was trying to extract image, style and js, but keep getting error on those.

tremby · 2021-11-19T02:23:13Z

Is there a way to make extraction work at present?

ZeldOcarina · 2022-01-23T21:54:12Z

up

F21 · 2022-04-25T08:52:56Z

Is there currently any way or a work around to export to HTML files? The instructions in the readme don't seem to work, probably due to extract-loader being unmaintained and incompatible.

My use-case is pretty simple. I have a bunch of mjml files and I want to use html-loader to parse each mjml file and and replace image source urls and srcsets to point to image assets that have been minified and renamed into a hashed filename to be deployed on a CDN. I want to use the html-loader to parse the files, insert the correct urls into the file and export the file back as mjml. I was able use html-loader's custom tags configuration to deal with the parsing and rewriting of URLs, but there doesn't seem to be anyway to export the result as an html file.

pseusys · 2022-09-13T03:31:17Z

What is the progress?

alexander-akait · 2022-09-13T03:35:08Z

Somebody can provide example how you use html-loader and need extract, I have two solutions here, but they are different and can be used for different things, so I want to see the most popular usage

StudioMaX · 2022-09-13T10:07:08Z

A simple example from Webpack 4:

            {
                test: /\.ejs$/i,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'ejs-loader',
                        options: {
                            variable: 'data',
                        }
                    },
                    'extract-loader',
                    'html-loader',
                ]
            }

use html-loader to replace the paths to the assets in the EJS template
return back to text version of EJS template
use ejs-loader to convert a text template into an object (in this case, the EJS template engine from lodash is used)

ejs-loader is used last because exported object from the EJS templating engine is imported somewhere, and is called with data from the backend.
Something like this:

// template.ejs
Hello, <%- data.name %>!
<% _.forEach(data.items, function (item) { %>
<div>Row - <%- item %></div>
<% }) %>

// view.js
import helloTemplate from 'template.ejs';

let response = {name: 'John', items: ['foo', 'bar']};
$('.body').append(helloTemplate(response));

But most likely this is still unrealizable in the latest version of html-loader, since EJS template is not a valid HTML and contains specific tags.

pseusys · 2022-09-13T11:36:32Z

I have a html file in my targets and would like to process it, save to file and extract images (img src tags) to separate directory.

<html>
<head>
    <link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
    <img src="hi.jpg">
</body>
</html>

Solution, described in extract-loader readme is not working (anymore):

            {
                test: /\.html$/,
                type: 'asset/resource',
                use: [
                    'extract-loader',
                    {
                        loader: "html-loader",
                        options: {
                            esModules: false
                        }
                    }
                ]
            },

Apparently, extract-loader tries to extract hi.jpg as a ES module and fails.

alexander-akait · 2022-09-14T11:28:17Z

@pseusys Why don't use main.css as entry point (it will be better optimized and compressed)?

@StudioMaX Weird, I think ejs-loader can (should) support src/srcset/etc resolving

pseusys · 2022-09-14T11:59:08Z

@alexander-akait because image is referenced as src attribute of img tag in html, and not in CSS.
As far as I know, one cannot set src via CSS. And I don't want to change that too...

alexander-akait · 2022-09-15T00:40:37Z

@pseusys In this case you lose assets optimizations...

pseusys · 2022-09-15T01:04:24Z

@alexander-akait I thought it would be easier to process the assets by extracting them from HTML files with html-loader.
However you're right, if that's not possible I think I should consider replacing <img> tags with e.g. <a> tags with background-image property set via CSS.

alexander-akait · 2022-09-15T21:02:19Z

I am think thinking you ejs-loader should support src/etc resolving and create assets for them not only compile them, anyway you can try:

Use HtmlWebpackPlugin with the template option and set ejs as transformer
Use CopyWebpackPlugin and use the transform function too so you don't need to extract them and they will be optimized in the production build, but here limitations - no resolving, but you can pass public path there and replace, for example <img src="{%public_path%}/images/image.png">

Or you can even combine these approaches.

Using import something from "./test.html" usually means you want to use HTML template in runtime

mbibko · 2023-01-18T15:56:41Z

Any progress on this Feature?
In webpack 4 I use html-loader and then export HTML into their own .html file.

    module: {
      rules: [
        {
          test: /\.(png|svg|jpg)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                context: "src",
                name: "[path][name].[ext]",
              },
            },
          ]
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].html",
              },
            },
            {
              loader: "extract-loader",
            },
            {
              loader: "html-loader",
              options: {
                minimize: false,
                attributes: {
                  urlFilter: (attribute, value) => !/\.(js|css)$/.test(value),
                }
              },
            },
          ],
        },
      ],
    }

My source HTML is:

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <img src="./img/3.png" alt="">
  <script src="index.js"></script>
</body>
</html>

My entry index.js is:

import ("./index.html")

webdiscus · 2023-02-22T21:30:42Z

@GMartigny @mbibko @pseusys

You can try to use the new universal html-bundler-webpack-plugin.

Note:

an entry point is an HTML template
all source script and style files can be specified directly in HTML, JS and CSS will be extracted automatically
all source assets defined in standard attributes (href, src, srcset, etc) will be automatically resolved and extracted
you can use any template engine such as Eta, EJS, Handlebars, Nunjucks, LiquidJS and others without additional loaders
defaults, supported EJS-like syntax, no additional loaders required

Profit
You specify all the source scripts and styles in one right place (in HTML), instead of defining them in many places: defining JS files in Webpack Entry, importing SCSS into a JS file.

Simple usage example

For example, there is ./src/views/home/index.html:

<html>
<head>
  <!-- load source styles here -->
  <link href="./style.scss" rel="stylesheet">
  <!-- load source scripts here and/or in body -->
  <script src="./main.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <img src="./logo.png">
</body>
</html>

The generated HTML contains the output filenames of the processed source files, while the script and link tags remain in place:

<html>
<head>
  <link href="/assets/css/style.05e4dd86.css" rel="stylesheet">
  <script src="/assets/js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <img src="/assets/img/logo.58b43bd8.png">
</body>
</html>

Add the HTML templates in the entry option (syntax is identical to Webpack entry):

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        // define all your templates here, the syntax is the same as Webpack entry
        index: 'src/views/index.html', // => dist/index.html
        // 'pages/about': 'src/views/about/index.html', // => dist/pages/about.html
        // ...
      },
      js: {
        // output filename of extracted JS from source script loaded in HTML via `<script>` tag
        filename: 'assets/js/[name].[contenthash:8].js',
      },
      css: {
        // output filename of extracted CSS from source style loaded in HTML via `<link>` tag
        filename: 'assets/css/[name].[contenthash:8].css',
      },
    }),
  ],

  module: {
    rules: [
      // styles
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader'],
      },
      // images
      {
        test: /\.(ico|png|jp?g|svg)/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name].[hash:8][ext][query]',
        },
      },
    ],
  },
};

tremby · 2023-02-23T00:55:40Z

That all sounds fantastic.

GMartigny changed the title ~~Remove examples using the extract-loader~~ [Feature] Add an extract option May 25, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] Add an extract option #385

[Feature] Add an extract option #385

GMartigny commented May 21, 2021 •

edited

Loading

alexander-akait commented May 21, 2021

GMartigny commented May 22, 2021

alexander-akait commented May 22, 2021

shoaibsharif commented Aug 28, 2021

tremby commented Nov 19, 2021

ZeldOcarina commented Jan 23, 2022

F21 commented Apr 25, 2022

pseusys commented Sep 13, 2022

alexander-akait commented Sep 13, 2022

StudioMaX commented Sep 13, 2022

pseusys commented Sep 13, 2022 •

edited

Loading

alexander-akait commented Sep 14, 2022

pseusys commented Sep 14, 2022

alexander-akait commented Sep 15, 2022

pseusys commented Sep 15, 2022 •

edited

Loading

alexander-akait commented Sep 15, 2022

mbibko commented Jan 18, 2023

webdiscus commented Feb 22, 2023

tremby commented Feb 23, 2023

[Feature] Add an extract option #385

[Feature] Add an extract option #385

Comments

GMartigny commented May 21, 2021 • edited Loading

Feature Proposal

Feature Use Case

alexander-akait commented May 21, 2021

GMartigny commented May 22, 2021

alexander-akait commented May 22, 2021

shoaibsharif commented Aug 28, 2021

tremby commented Nov 19, 2021

ZeldOcarina commented Jan 23, 2022

F21 commented Apr 25, 2022

pseusys commented Sep 13, 2022

alexander-akait commented Sep 13, 2022

StudioMaX commented Sep 13, 2022

pseusys commented Sep 13, 2022 • edited Loading

alexander-akait commented Sep 14, 2022

pseusys commented Sep 14, 2022

alexander-akait commented Sep 15, 2022

pseusys commented Sep 15, 2022 • edited Loading

alexander-akait commented Sep 15, 2022

mbibko commented Jan 18, 2023

webdiscus commented Feb 22, 2023

Simple usage example

tremby commented Feb 23, 2023

GMartigny commented May 21, 2021 •

edited

Loading

pseusys commented Sep 13, 2022 •

edited

Loading

pseusys commented Sep 15, 2022 •

edited

Loading