Stack Overflow
Stack Overflow

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
31
votes
7 answers

How can I provide parameters for webpack html-loader interpolation?

In the html-loader documentation there is this example require("html?interpolate=require!./file.ftl"); <#list list as list> ${list.name}
Patrick Lafrance
  • 311
  • 1
  • 3
  • 5
24
votes
2 answers

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

I thought a loader is invoked only when some resource is imported or required somewhere and the resources match with such a loader. But in the following codes, no html file is imported anywhere but the html-loader is still necessary to make the…
Shawn Chen
  • 1,017
  • 2
  • 13
  • 24
18
votes
3 answers

When using file-loader and html-loader in webpack the src attr of image is '[object Module]'

I am doing a project with webpack4 from scratch. But when I try to display an image in an HTML file, I face a weird problem: After npm run build, the src of image tag is built as
Nelson
  • 209
  • 2
  • 7
18
votes
6 answers

How can I use my webpack's html-loader imports in Jest tests?

I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file. Here is an example: import…
Jannis
  • 17,025
  • 18
  • 62
  • 75
16
votes
1 answer

Using webpack with a .html entry

How can I webpack a web app into an output .html file, starting from a traditional input .html? Here is a simple starting point: index.html main.js import React from…
P Varga
  • 19,174
  • 12
  • 70
  • 108
16
votes
1 answer

Typescript 2.0 and Webpack importing of HTML as string

I'm trying to import a HTML file as string with the help of webpack (Currently using webpack because TypeScript 2.0 doesn't support async/await on non ES6 targets). The problem I have is, even if the html-loader version from github supports a config…
Fionn
  • 10,975
  • 11
  • 54
  • 84
15
votes
1 answer

Cannot find module error on importing html file in webpack

Trying to import html in TypeScript with html-loader plugin with: import buttonHtml from './button.html'; Gives TypeScript error: TS2307: Cannot find module './button.html' Webpack config: const path = require('path'); module.exports = { …
Shyamal Parikh
  • 2,988
  • 4
  • 37
  • 78
15
votes
3 answers

What exactly am I supposed to do with "module.exports = 'html_template_content'" on webpack

So I want to do a very simple task using webpack. I have a few static HTML templates like e.g. test.html
template content
and all I want to do is return the string inside the template e.g require("raw!./test.html") with…
user3531149
  • 1,519
  • 3
  • 30
  • 48
14
votes
4 answers

Initial static React HTML rendering with Webpack

Is there a way to pre-generate the HTML structure of a (single route) React application directly in the HTML entry point? Then the page will be able to display HTML (based on React initial state) before any JS is loaded. I'm actually using…
Yves M.
  • 29,855
  • 23
  • 108
  • 144
13
votes
3 answers

How do I fix [Object Module] in image src of webpack output?

I'm trying to set up a modern vanilla web starter with Webpack. I got stuck when I added webpack-html-loader and html-loader. Here's what happens... When I make use of an img tag in the entry index.html file, with an src attribute like this…
Victor Ofoegbu
  • 191
  • 2
  • 9
12
votes
3 answers

What is the use of html-loader and how it work's in Webpack

I was learning webpack and I came across loaders,The defination of loaders says that it transform your code,so that it can be included inside the javascript bundle. But,How html-loader works? The html-loader defination says that it exports html as…
user8989
  • 580
  • 2
  • 6
  • 21
11
votes
3 answers

webpack file-loader duplicates files

I'm using webpack and it's file-loader + html-loader to emit files into my output directory. It works almost as expected, because it also duplicates those files. Here is a part of my webpack.config.js file: module.exports = { module: { …
Daweed
  • 1,419
  • 1
  • 9
  • 24
11
votes
5 answers

Use HTMLWebpackPlugin with an EJS file

I want to use the HTMLWebpackPlugin to take my index.ejs template file, insert my bundled assets, and output a final index.ejs file. This example has a EJS variable <%= API_URL %>, but webpack is interpreting it. How can I stop webpack from…
Don P
  • 60,113
  • 114
  • 300
  • 432
10
votes
3 answers

Use html-webpack-plugin with string-replace-loader in webpack

I'm trying to replace a variable in index.html that looks like this: In the config file I use: { test: /index\.html$/, loader: 'string-replace', query: { search: '$variable', replace:…
wap300
  • 2,660
  • 1
  • 16
  • 25
7
votes
1 answer

Import html from typescript with webpack

I am trying to import html into a variable in typescript using webpack. Here is my setup: package.json: { "devDependencies": { "awesome-typescript-loader": "^3.2.3", "html-loader": "^0.5.1", "ts-loader": "^2.3.7", "typescript":…
Luke Skywalker
  • 1,464
  • 3
  • 17
  • 35
1
2 3 4 5 6 7