Stack Overflow
Stack Overflow

Questions tagged [webpack-file-loader]

Hadles such imports

import img from './file.png'

with this configuration

  rules: [
  {
    test: /\.(gif|jpg|png)$/,
    use: [
      {
        loader: 'file-loader'
      }
    ]
  }

and result: image files were copied to output folder.

Other application: copy css styles to the output folder adding the hash.

https://github.com/webpack-contrib/file-loader

289 questions
3
votes
1 answer

Webpack - different font path for build and production css in the less-loader

I'm trying to create an CSS from LESS with webpack. My source folder have following hierarchy: fonts desyrel desyrel_-webfont.woff less ds-handwritten.less Content of less file include relative font path, which will be used in the…
aztechowski
  • 113
  • 7
3
votes
1 answer

How do you use both webpack file-loader and svg-inline-loader for SVG?

I have scoured the internet to look for a solution to load svgs using the file-loader and the svg-inline-loader. To be more precies, I want the option to use both separately, but I can't seem to get the webpack.config right. This is my config so…
TheYuwana
  • 185
  • 2
  • 13
3
votes
1 answer

Why is Webpack file-loader not triggering for CSS urls?

I'm trying to get Webpack to suck up our image files that are referenced from .scss files. However, nothing I've tried seems to actually be triggering the file-loader. Our CSS is bundled up nicely, but any url() references in the CSS seem to be…
Asherlc
  • 1,111
  • 2
  • 12
  • 28
3
votes
1 answer

Bundle Webpack multi entry points into one file using file-loader

I use a webpack config in which I use an array of file paths as entry point. Also known as multi-main entry. These files are not dependant on each other, but I want to bundle them. The js bundle just fine. Webpack creates a bundle js file containing…
Shizzler
  • 31
  • 4
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
3
votes
1 answer

Webpack cannot find image when imported - module not found

I am using webpack dev server to serve up a simple Typescript app. In it, I am trying to load an image dynamically in the Typescript like so: import img from "./image.png"; const myImg = new Image(); myImg.addEventListener("load", ...); myImg.src =…
dawsonc623
  • 1,841
  • 2
  • 16
  • 26
3
votes
2 answers

Webpack alias with src and file-loader not copying image

I have an issue where file-loader isn't copying images that are using a resolve.alias in the image src. An example: The resolve.alias is: alias: { 'assets': path.resolve(__dirname, 'client/assets'), } And the…
Darren Keen.
  • 512
  • 6
  • 10
3
votes
1 answer

ts-loader -> file-loader doesn't resolve require dependencies

I want to create a service worker. DISCLAMER: I don't wanna use serviceworker-webpack-plugin, it adds a lot of overhead that I simply don't need. I'm 100% sure that webpack is able to serve transpiled js/ts files as static files. So I have main.ts…
deathangel908
  • 8,601
  • 8
  • 47
  • 81
3
votes
1 answer

Webpack 4 file-loader works on font files, but not image files

I am trying to get Webpack 4 to output a .png file into /dist/assets, and have that be used by my index.html file via file-loader. The .png file does output into dist/assets, but it does not get loaded in by the browser. Funny thing, I treat my .png…
hyperupcall
  • 869
  • 10
  • 21
3
votes
1 answer

Using webpack and url-loader to load inline images in React

I need to use a inline style and pass in the url of a image file. I do it like this: let url = `url(${this.state.logo})` var cardStyle = { backgroundImage: url, backgroundSize: '200px 50px', …
ZarifS
  • 467
  • 1
  • 11
  • 20
3
votes
1 answer

Importing file-loader directly in entry point of app (webpack). What is the exclamation point?

I'm using a React template and I am currently very confused by this one line, for multiple reasons. require('file-loader?name=[name].[ext]!./index.html'); First, why is file-loader being required in the entry point app file? What is the…
Michael Du
  • 669
  • 7
  • 15
3
votes
1 answer

Trying to load large json files using file-loader and webpack

I've been trying out a couple of ways to load a large json ( > 144 MB) file that I need in my React App using Webpack (v4.3). I was following GitHub Issue on Webpack and tried using a file-loader with Webpack. PFB, the webpack.config.js file. When I…
John
  • 2,445
  • 2
  • 17
  • 25
3
votes
0 answers

Reference image from node_module in html using webpack

I have a template npm package that has a bunch of assets in it. In an extension of the template, I am attempting to reference an asset from the template, which is installed as an npm dependency.
jekelija
  • 257
  • 4
  • 16
3
votes
1 answer

Inserting a function in Webpack Plugin

Does anyone know how to insert and reuse a function in a Webpack plugin? Like from my plugin insert that function myFunction() and call it from the generated bundle? Background information: I'm replacing some paths to some assets that are inside…
Claudiordgz
  • 3,023
  • 1
  • 21
  • 48
3
votes
0 answers

Vue file-loader generates correct path, but doesn't copy files

I'm working on a component to render icons from a folder by name. This is my component file: