100 questions
1
vote
0
answers
184
views
Webpack HTML loader doesn't work along with CSS loader
Issue
I'm creating a project with Electron Forge and webpack. I added a 'public' directory to my project, and a HTML-loader plugin to resolve the imports in the HTML files.
Some parts of my webpack ...
- 11
1
vote
1
answer
225
views
Processing .css files included inside link tags in HtmlWebpackPlugin template
Brief Description:
I am running into unexpected outputs/issues when working with .css files referenced inside <link> tag in the .html template provided to HtmlWebpackPlugin along with using ...
- 37
0
votes
0
answers
89
views
Webpack: Regex in html filename?
My filename in url is something like:
index.qwe123.html
Where qwe123 is a random string. I want to display index.html file regardless this string. How do I customize in Webpack config:
new ...
- 25
1
vote
1
answer
923
views
Using html partials with webpack
I'm quite new in JS and webpack and I'm trying on my project to use partials for header and footer in order to not repeat them everywhere.
My first approach was to install html-loader and use in my ...
- 59
0
votes
2
answers
1k
views
I want to open an html file in a new tab on button click in react js
I want to open an html file which is in my local, in a new tab on button click in react component. I am trying to import the html file and then use window.open() method of javascript for this purpose. ...
1
vote
2
answers
2k
views
Appropriate loader in Webpack on Next JS
I want to load a HTML file with Next JS and html-loader, but I have this error message :
Module parse failed: Unexpected token (2:2)
You may need an appropriate loader to handle this file type, ...
- 109
0
votes
1
answer
936
views
Error when I use html-loader in a web pack project
I am setting webpack but I have an error. It happens when I try to use html-loader, what I do when I set rules in the module in webpack.config.js file. It says there is an error in child compilation. ...
0
votes
1
answer
1k
views
html-loader only works on index.html file
I'm working on a static site project, and have to now add multiple pages using the same header and footer. I'm trying to do this by turning the header.html and footer.html files into partials.
I've ...
- 411
0
votes
2
answers
2k
views
Opening an external html file from a react app
I have a react app, which i make thought create-react-app. I want to make here a link, that will refer to project.html file. I tried to make something like this:
const Portfolio = (props) => {
...
- 13
2
votes
1
answer
2k
views
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 ...
- 3,366
6
votes
4
answers
10k
views
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',
...
0
votes
1
answer
353
views
saving SCSS change causes webpack fail to load image file from HTML img tag (Webpack 5)
I just get this problem recently , but I can't figure out what is wrong with my webpack setting.
Every time I save my SCSS files (./src/scss/) change, and webpack do refresh the page (it is hot module ...
- 463
1
vote
0
answers
303
views
Webpack 4 Child compilation failed: Module parse failed: Unexpected character '�' (1:0)
this is my first time using Webpack and I have a problem with it.
I get error message
ERROR in Error: Child compilation failed:
Module parse failed: Unexpected character '�' (1:0)
when I put image ...
- 27
0
votes
1
answer
849
views
display image in html using webpack
when i use html-loader and file loader then in development mode
image in not dispaly on browser
images in src->assets->images folder
and in html file
please suggest me what i can do to run the ...
0
votes
2
answers
715
views
Webpack 5 with html-loader gives ReferenceError
I'm trying to run a hello world app in Angular 12 + webpack 5. When I try to add html-loader (as all the guides say i should), I get the error below.
Why does this happen? and how can I fix it?
If ...
- 8,275
2
votes
1
answer
922
views
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 ...
- 23
1
vote
0
answers
1k
views
How to fix "Child compilation failed" with webpack configuration and html-webpack-plugin
I encountered the following problems when configuring webpack. How can I solve them? I want to use my own index.html file.
My configuration file follows, the error message is at the bottom:
webpack....
- 11
3
votes
0
answers
694
views
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-...
- 2,298
3
votes
0
answers
2k
views
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 ...
- 3,290
0
votes
1
answer
555
views
How can I work with anchor tags in webpack?
I must be missing something because there seems to be almost no documentation about parsing anchor tags in webpack. For example if I want to hash the name of html files which are linked to in my ...
- 140
2
votes
1
answer
3k
views
Vue 3 include local static files into index.html
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin....
- 7,279
11
votes
3
answers
4k
views
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 ...
- 1,426
1
vote
1
answer
1k
views
Exporting the HTML into their own html file with html-loader and extract-loader
I am trying to convert the html file that would contain absolute paths in src. I found a similar problem in the webpack documentation. I try to use html-loader with extract-loader but gets an error.
...
- 11
0
votes
1
answer
101
views
How to use <img src="./"> in React with Webpack?
I need to create an array of div (with the image inside).
My code so far:
let slides = sliderData.map(() => {
let advantagesList = advantages.map((adv) => {
return(
<li key={adv....
0
votes
1
answer
2k
views
ReactJS link to local HTML file from different folder/project
I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local ...
- 1
0
votes
1
answer
1k
views
Webpack doesn't rendering html partials in another html partial
I'm trying to import static html components in my templates,
I've this structure:
/src/home.html.ejs
/src/parts/header.html
/src/parts/breadcrumbs.html
/src/home.html.ejs body
<%= require('./...
- 385
1
vote
1
answer
6k
views
Why do i get this error in Webpack 5.11.0: 1 ERROR in child compilations?
so i get this error in my webpack code when trying to compile it, this happens when i start in production mode and when i delete html-loader the error is gone, i also include HtmlWebpackPlugin and ...
- 1,027
0
votes
0
answers
271
views
[email protected] with [email protected]
I've configured [email protected] (with [email protected]) to work with html-webpack-plugin (plus [email protected] and [email protected]):
const path = require('path');
const HtmlWebpackPlugin = ...
- 2,862
0
votes
1
answer
1k
views
React import html - Module parse failed: You may need an appropriate loader to handle this file type
I want to import a html file and convert into json.
const DocHtml = require('../../Shared/assests/index.html');
const template = { __html: DocHtml };
webpack.config.js
module.exports = {
module: {
...
- 1,141
0
votes
1
answer
855
views
webpack: alias does not work in HTML tags
Is there any reasons why the alias below does not work in HTML tags or work in JavaScript?
In my webpack config file:
resolve: {
alias: {
'~': path.resolve(__dirname, './src/')
}
},
...
- 57.7k
1
vote
1
answer
1k
views
Is there any way in webpack html-loader preprocessor for HTML file interpolation?
I use the Webpack with html-loader, but since they removed the interpolation option my old projects can't follow the updates. There are serveral projects, so it would be too much effort to upgrade all ...
- 6,161
0
votes
0
answers
139
views
Webpack - HTML loader doens't scan all files
I have implemented html-loader on my Webpack configuration file:
module: {
rules: [
{
test: /\.html$/i,
exclude: /(node_modules)/,
use: ['html-loader'],
...
- 797
1
vote
0
answers
478
views
Webpack html-loader error processing href in anchor tags
Has anyone gotten Webpack/html-loader to handle image references in anchor tags (href attribute)? I'm using the following webpack config that throws the error "Callback was already called" ...
- 53
18
votes
3
answers
16k
views
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 ...
- 678
1
vote
2
answers
2k
views
Webpack/html-loader <a> tag href resolve
I've set up aliases in my webpack config file. It works fine for JS, CSS imports and img src attributes. However I'd like to build a gallery in the HTML file with the standard lightbox setup:
<a ...
- 540
2
votes
1
answer
3k
views
How to generate html template for static page from header/footer (and css/js inject) in Webpack 4 (lodash template not working)?
I'm trying to build static html pages with webpack 4. I'm using html-webpack-plugin. I want to define some header.html and footer.html and import them later in all html pages. But I want also then my ...
3
votes
0
answers
313
views
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 ...
- 385
0
votes
1
answer
1k
views
Webpack 4 generates wrong src path for img tags in different levels of folder structure
I have a Webpack 4 project to make a multi language admin-dashboard with this folder and file structure:
admin-dashboard
|
|--build
| |--assets
| | |--img
| | |--font
| |--fa
| | |--index....
- 2,105
1
vote
0
answers
456
views
How do I fix [object Object] in rel=stylesheet in webpack output?
When I tried to webpack my project, I'm getting this error <link rel=stylesheet href=[object Object]> my expected output for CSS styles ./styles.css.
I'm new to webpack, Can anyone please help ...
4
votes
1
answer
2k
views
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 ...
- 3,260
4
votes
2
answers
1k
views
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 ...
- 231
1
vote
0
answers
320
views
DefinePlugin not running immediately after html-loader
I’m trying to use DefinePlugin with html-loader. I’m using interpolation in html-loader, and trying to use values from DefinePlugin in the interpolated expressions.
This works when I load into ...
- 1,958
2
votes
1
answer
1k
views
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 ...
- 121
1
vote
1
answer
2k
views
HtmlWebpackPlugin load bundle.[hash].js/css into base twig file
I have two entries in my webpack.config.js. One for the JS and one for the SCSS. I can run in development and product mode. If i create a production build I get the following files: index.html, main[...
- 661
13
votes
3
answers
9k
views
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....
- 301
18
votes
3
answers
7k
views
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 <image src="[...
- 209
2
votes
1
answer
2k
views
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 ...
- 23
2
votes
2
answers
5k
views
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 ...
- 27
0
votes
1
answer
1k
views
How to manipulate a received svg (access '<g>' and '<rect>' elements) via vue
I'm getting several SVG's that are all structured like this:
<?xml version="1.0" encoding="utf-8"?>
<svg>
...
<g id="cabin">
<g id="1">
<g id="a"...
- 4,211
1
vote
1
answer
3k
views
Webpack wrong relative path in css and html
I have googled a lot, but I didn't find a clear solution to my question.
Both my xxx.sass and index.html will reference the same xxx.png from images folder. But the webpack resolved to the wrong ...
- 2,303