Plain text output

[ryuran]

I try to make it work with html-loader but the output should be a plain-text html and not a js with a exported string.
Maybe add an option for output mode.
I can't find a loader "string to plain text"

[ryuran]

I close this one by using extract-loader.

Maybe we could add an exemple using html-loader.

[jabney]

One of the examples from the readme uses extract-loader. I don't remember why it's used in this specific example and not the others (I originally developed this loader a couple years ago).

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.pug$/,
      use: [{
        loader: 'file-loader?name=[name].html'
      },
      {
        loader: 'extract-loader'
      },
      {
        loader: 'render-template-loader',
        options: {
          engine: 'pug',
          locals: {
            title: 'Rendered with Pug!',
            desc: 'Partials Support'
          },
          engineOptions: function (info) {
            return { filename: info.filename }
          }
        }
      }]
    }]
  },
  plugins: []
}

It may be because of the file-loader item used higher in the loader stack, or it may be that HtmlWebpackPlugin used in the other examples likes a module export, or a combination of both:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\/src\/index.ejs$/,
      use: [{
        loader: 'render-template-loader',
        options: {
          engine: 'ejs',
          locals: {
            title: 'Render Template Loader',
            desc: 'Rendering templates with a Webpack loader since 2017'
          },
          engineOptions: function (info) {
            // Ejs wants the template filename for partials rendering.
            // (Configuring a "views" option can also be done.)
            return { filename: info.filename }
          }
        }
      }]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.ejs'
    })
  ]
}

Perhaps html-loader behaves like file-loader and likes a plain text file, whereas when using HtmlWebpackPlugin extraction isn't necessary.

From the documentation on extract-loader:

The extract-loader evaluates the given source code on the fly and returns the result as string. Its main use-case is to resolve urls within HTML and CSS coming from their respective loaders. Use the file-loader to emit the extract-loader's result as separate file.

import stylesheetUrl from "file-loader!extract-loader!css-loader!main.css";
// stylesheetUrl will now be the hashed url to the final stylesheet

The extract-loader works similar to the extract-text-webpack-plugin and the mini-css-extract-plugin and is meant as a lean alternative to it. When evaluating the source code, it provides a fake context which was especially designed to cope with the code generated by the html- or the css-loader. Thus it might not work in other situations.

I'll consider how this might be documented, perhaps in a FAQ. If you would, post the webpack config you're using so I can have a look.

[ryuran]

Yes.

html-loader want a plain text file as input and give a js exporting a string as output.
HtmlWebpackPlugin can work with a js exporting a string or a template function as entry.

So if you want chain with html-loader to resolve img or other assets files, you need to use extract-loader as middleware.

[jabney]

Added a FAQ section in the version 1.2.1 readme that provides some explanation of extract-loader.