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
Questions tagged [webpack-html-loader]
102 questions
7
votes
1 answer
webpack html-loaders lowercase angular 2 built-in directives
I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error.
It appears that all angular2…
chungtinhlakho
- 870
- 10
- 21
6
votes
2 answers
How to output html files from pug templates with webpack?
I'm trying to output individual html files from pug templates in my webpack project. The problem I'm having is in getting pug-loader to render html into the files.
My webpack.config:
const path = require('path');
const glob = require('glob');
const…
Mark Thë Brouch
- 179
- 3
- 12
6
votes
1 answer
Use file-loader and html-loader together
I'm working on an angular application which requires html files to be extracted as plain HTML files and at same time should check for any 
to require those images (as assets). In addition, images are based upon root path (so…
Francesco Belladonna
- 11,361
- 12
- 77
- 147
5
votes
3 answers
Webpack 5 use html-loader to load svgs
I recently upgraded to Webpack 5 and my html-loader no longer loads svg files and inlines them.
Here's my svg rule in webpack
{
test: /\.svg$/,
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
…
Christian Pavilonis
- 92
- 1
- 7
5
votes
3 answers
Parse an HTML template as you require it in JavaScript
I spent hours on a basic webpack configuration but I'm still not able to make it work. My aim is to perform the parsing of a html template as you import it in a JavaScript file. It looks like a common use-case, but there should be something odd in…
Christian Vincenzo Traina
- 9,546
- 2
- 40
- 63
5
votes
2 answers
Webpack: include html partial inside another partial?
Is there a way to include html partial inside another partial using webpack?
I am using html-loader to do this:
index.html
<%= require('html-loader!./partials/_header.html') %>
But when I try to include another partial inside a _header.html it is…
mirta
- 644
- 10
- 25
5
votes
7 answers
Webpack: load images from inline style (background-image)
I have a problem with loading an image using webpack.
When I use an image tag on an html page, everything works fine:
But I also have a need to use inline styles:
But I also have a need to use inline styles:
Vladimir Topolev
- 397
- 3
- 21
4
votes
1 answer
Using html-loader with angularJS (v1) templates and Jest is failing
I've got an AngularJS (v.1.7) app served by Rails. I just moved from Sprockets to Webpack.
While trying to migrate my Jasmine tests to Jest. I ran into an issue with html-loader which I'm using to import my directive templates into the…
mr rogers
- 3,200
- 1
- 19
- 31
4
votes
2 answers
Webpack html-loader, include data-src image for lazy loading
I'm using webpack with html-loader to create an assets folder inside my dist folder.
But I'm trying to implement lazy loading on images by changing src attribute with a data-src link.
I found in the doc that you can specify others attribute, which…
ElliotYoYo
- 201
- 1
- 3
- 9
4
votes
0 answers
how to make friends 'localIdentName' in css-loader with html files, using webpack?
I want to use webpack with css-loader with option 'localIdentName' and of course to use the hash of class names
but I'm not use React or a like libraries for DOM
my webpack rules
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
…
Sergey Volkov
- 871
- 11
- 17
4
votes
1 answer
http-loader fails to include html from another project
I have following projects tree
some-project
some-project.component.ts
some-project.html
index.ts
webpack.conf.js
another-project
another-project.component.ts
anpther-project.html
index.ts
webpack.conf.js
I'm running…
VladosJS
- 1,210
- 8
- 20
3
votes
0 answers
webpack html-loader and MiniCssExtractPlugin
I'm using setup from getting-started webpack page:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
…
Bojan Vukasovic
- 2,054
- 22
- 43
3
votes
0 answers
Webpack: Loading index.html - Module build failed, Unknown: Unexpected token (3:61) (import.meta.url)
I am learning webpack js; following an example where the trainer loads an html page from src folder to a destination (dist) folder. I am trying the same thing but on Webpack5. I have created a config folder and running the below webpack.dev.js from…
Ahmed
- 2,966
- 7
- 42
- 69
3
votes
0 answers
How to implement html partials in version 1.0.0 of Webpack file-loader where interpolate has been deprecated?
In version 1.0.0 of Webpack's html-loader, the interpolate option has been deprecated, in favour of preprocessor (according to their changelog). interpolate enabled interpolation syntax for ES6 template strings, allowing you to import other html…
leoncvlt
- 385
- 2
- 5
- 13
3
votes
1 answer
Generating HTML with relative path to assets using Webpack
I have the following src folder structure:
/src
+-- /app
| +-- index.js
| +-- /templates
| +-- index.html
| +-- /subfolder
| +-- nested.html
|
+-- /images
| +-- webpack.png
|
+-- /styles
| +-- index.scss
I am trying…
vikdotdev
- 105
- 1
- 1
- 10