Questions tagged [webpack-loader]
141 questions
58
votes
2 answers
Angular CLI custom webpack config
In previous versions of Angular there was an option for eject so that you could modify your webpack configuration as you please.
One of the most common use cases for this feature was adding custom webpack loaders.
In Angular 6 this option has been…

JeB
- 11,653
- 10
- 58
- 87
22
votes
6 answers
How can I replace files at compile time using webpack?
I have a project with miltiple configuration. The first config is config.dev.js file that contains some development configiration. I using it in development mode. The second config is config.js file. I using it in production mode.
In the code I…

5tarter
- 221
- 1
- 2
- 3
13
votes
5 answers
How to import external css file in nextjs app
I am working on react based nextjs app. Some npm packages are using external css import.
I am getting error like
Module parse failed, you may need an appropriate loader to handle this file type.
How can I support css import from external packages…

Mira Thakkar
- 339
- 1
- 6
- 19
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
2 answers
Load video mp4 webpack loader
How to use loader for mp4 video format with webpcak 4, I try like this:
{
test: /\.mp4$/,
use: 'file-loader',
loader: 'file-loader?name=videos/[name].[ext]',
},
and import like this
import…

Palaniichuk Dmytro
- 2,943
- 12
- 36
- 66
9
votes
1 answer
How to import custom file types in Typescript
As a bit of a fun project, I'm making a "framework" for creating native web components. I've created a webpack loader that parses some XML in custom .comp files and exports an es2015 class. Unfortunately, I can't find a way to import these .comp…

heavygl0w
- 209
- 1
- 3
- 7
8
votes
1 answer
Is there a way to get dependency tree from webpack?
I have a big project with different types of dependencies in it: js, scss, svg, png, etc...
My webpack is configured and bundles my code, I am happy with it.
But I want to get some kind of hash of all my dependencies (including binaries and all…

soq
- 181
- 1
- 6
8
votes
1 answer
How can I run arbitrary bash scripts on files via Webpack without maintaining loaders for each file type?
It seems like Webpack runs tools that transform code via "loaders", rather than using the APIs of those tools directly. This adds a layer of abstraction over those tools which sometimes means the APIs of the tools is not fully exposed or updates to…

Jo Sprague
- 16,523
- 10
- 42
- 62
7
votes
0 answers
Get entrypoint name in webpack loader
I have a bunch of webpack entrypoints configured as described here:
module.exports = {
entry: {
pageOne: './src/pageOne.js’,
pageTwo: './src/pageTwo.js’,
pageThree: './src/pageThree.js’
}
}
The entries themselves import various…

Björn
- 12,587
- 12
- 51
- 70
7
votes
1 answer
Webpack Upgrade - Module not found: Can't resolve node_modules
I'm currently working on a upgrade from Webpack 1 to 2, and then to 3. Within this upgrade, I've adhered to the migration instructions as per the instructions for 1 => 2 and for 2 => 3.
The issue I'm having is that none of the installed packages…

Xenyal
- 2,136
- 2
- 24
- 51
6
votes
1 answer
Error when using s3-sync-client and @aws-sdk/client-s3 with webpack in Electron project
I am working on an Electron project and I have configured webpack for it. I recently installed s3-sync-client and @aws-sdk/client-s3 using npm, but when I try to run the project, I get the following error in the console:
[0] Module parse failed:…

Heena love Trivedi
- 61
- 3
6
votes
1 answer
Webpack Pug/HTML loaders converts capital letters to lowercase on production mode
I am using both vue single-file components and separating of markup and logic to .pug and .ts files respectively. If you interesting why I don't unify is please see the comments section.
Problem
import template from…

Takeshi Tokugawa YD
- 670
- 5
- 40
- 124
6
votes
0 answers
Can't write webpack loader using es6 imports
I wrote this webpack loader
module.exports = function(source) {
return `export default 'hello'`;
}
that I want to rewrite using es6 imports
export default function loader(source) {
return `export default 'hello'`;
}
without…

Devid Farinelli
- 7,514
- 9
- 42
- 73
6
votes
4 answers
ReactJS - including other scss files in main.scss
In my reactJS application - I am including all .scss files in one main.scss file - under styles folder in src folder. I have the following webpack configuration. tried including main.scss file directly in my main component - getting error at…

monkeyjs
- 604
- 2
- 7
- 29
5
votes
1 answer
webpack issue "downloadable font rejected by sanitizer" or "failed to decode downloaded font"
I ran into a well known problem that, however, has no clear solution: the following setup of webpack (encore, within Symfony) produces the error downloadable font: rejected by sanitizer ... in Firefox and failed to decode downloaded font in Edge for…

meistermuh
- 393
- 3
- 11