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:…
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…
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
1
2 3
9 10