Questions tagged [webpack-html-loader]

Important topic to understand is the difference between html-webpack-plugin and html-loader:

How does html-webpack-plugin work with html-loader?

Html loader home page: https://github.com/webpack-contrib/html-loader

102 questions
3
votes
2 answers

How to include raw static html file into another html file with webpack

I have a header.html file
And I have an index.html file too where I want to include this header.html. My index.html looks like this: ${require('./header.html')}
netdjw
  • 5,419
  • 21
  • 88
  • 162
3
votes
1 answer

cannot load html from webpack loader in reactjs

I'm very new to reactjs and webpack. I want to load html file to reactjs via using I use html-loader and webpack, but got this error Failed to compile. ./src/test_ts.html Module parse failed: Unexpected token (1:0) You may need an appropriate…
Uny
  • 31
  • 1
  • 2
3
votes
0 answers

how to inject css bundle in head and js bundle in body using webpack html plugin

I am absolutely new to Webpack and I work with scss and vue on a little project. What I try is to compile all my .scss files to css and bundle them up in a bundle.css that is automatically injected into the head (I already set up the sass and css…
nasskalte.juni
  • 433
  • 3
  • 14
3
votes
0 answers

Webpack combine html-loader with file-loader to copy templates

What I'm trying to do is combine html-loader to copy assets referenced from html templates e.g. and file-loader to copy those html templates into the bundle folder. I do not want to embed those html files directly in…
kamilkp
  • 9,690
  • 6
  • 37
  • 56
2
votes
1 answer

What is the result of having multiple rules with the same test in Webpack config?

The Webpack documentation on module.rules is quite sparse: [Rule] An array of Rules which are matched to requests when modules are created. These rules can modify how the module is created. They can apply loaders to the module, or modify the…
AxD
  • 2,714
  • 3
  • 31
  • 53
2
votes
1 answer

Webpack 5 Asset modules not creating images to dist folder when using handlebars-loader. How do i get it to output the images?

This is my config file, I have tried with html-loader it works fine for .html files but i’m now trying to learn and use handlebarsjs its not working the same. I've also tried using the preprocessor option for html-loader whereby i created a function…
Victor
  • 25
  • 2
2
votes
1 answer

Vue 3 include local static files into index.html

<%= htmlWebpackPlugin.options.title %>
Most Wanted
  • 6,254
  • 5
  • 53
  • 70
2
votes
1 answer

recursive html-loader includes not working

I am moving a project that used grunt across to webpack. I am using HTML snippets a lot to reuse HTML components across various files. For HTML includes that do not require passing of variables I am using webpack html-loader. For those that do I am…
user2115620
  • 101
  • 1
  • 10
2
votes
1 answer

Webpack File-loader returns wrong path to subfolder

I'm making a website with multiple entry points. With the following structure. index.html products index.html product1 index.html I'm using file-loader to load the images on the js files. Here's my webpack config: const path =…
2
votes
2 answers

Html-loader + file-loader not bundling the correct image source

I'm planning to use Webpack for a project and I'm setting up my workflow with Html-loader + file-loader to get a production html file with dynamic src for the images, as Colt Steele teaches in this video. Here are my src/ files: index.html
2
votes
0 answers

How to get html-loader to process HTML's script's src?

Static HTML generation with Webpack I've setup a static website generator using Webpack as bundler and html-loader in order to generate a dependency tree and process found dependencies (CSS, images, JS, etc). To do so, I managed html-loader's…
dreadcast
  • 171
  • 6
2
votes
3 answers

`html-loader` overwrite `HtmlWebpackPlugin` `<%= %>` expression

I am using HtmlWebpackPlugin in webpack and below is its configuration: new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: 'body', sdk: '/mylib.js' }) In my html I define the script…
Joey Yi Zhao
  • 37,514
  • 71
  • 268
  • 523
2
votes
1 answer

How to fix HTML file comments not being ignored by Webpack Dev Server?

I have a webpack (v3.5.6) build using html-loader and processing multiple HTML files into themselves, embedding smaller images into HTML using url-loader. The config works perfectly fine for building, but fails when using Webpack Dev Server…
krl
  • 5,087
  • 4
  • 36
  • 53
2
votes
1 answer

how to import html files with webpack 2?

I can't figure out how to import html files with webpack 2! I am using angular 1.6.0 and typescript. I would like to import a template and use it as a router state template: import * as angular from 'angular'; import * as uiRouter from…
Mar
  • 1,526
  • 6
  • 21
  • 46
2
votes
1 answer

Pass data to pug using pug-html-loader (cannot read property of undefined)

According to the readme of pug-html-loader, the loader accepts a data object which is being passed as part of the options to the template. While not available on the options within the pug API reference, a grunt plugin I've found (grunt-contrib-pug)…
maelgrove
  • 939
  • 3
  • 9
  • 18