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
7
votes
1 answer

Webpack file loader does not copy files

In an Angular2 application, I have a file loader setup in webpack config, like so: { test: /\.(eot|svg|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=/assets/fonts/[name].[ext]' } I also have this elsewhere in the…
ruk
  • 153
  • 2
  • 5
6
votes
2 answers

Webpack url-loader or file-loader not working react app

Images are not loading in the browser using Webpack 4 with either of url-loader, or file-loader. Small images are not in data url(or if they are the browser isn't showing them) and file network requests are not being made with file loader. Nginx is…
Eric Steen
  • 719
  • 2
  • 8
  • 19
6
votes
0 answers

webpack file loader relative path

I have a webpack config file and a sample test for images like this: module: { rules : [ test : /\.(jp?g|png|gif)$/, 'file-loader?name=[name].[ext]&outputPath=images/' ] } and I have a simple file structure…
Amir Shahbabaie
  • 1,352
  • 2
  • 14
  • 33
6
votes
1 answer

Webpack not loading png images

I have few images in src folder: src/img/favicon.png src/img/profpic.png In index.html file I will point as In some html files I will point as I am trying…
ShaMoh
  • 1,490
  • 3
  • 18
  • 34
6
votes
2 answers

Webpack - Require Images Using File-Loader

I am using Webpack for my React app. I installed 'File-loader' & 'Url-loader' in my webpack config. However, Im not sure how to link images to my components. I am holding the 'src' for the image in a 'Data.js' file from where I pass the data for…
Kayote
  • 14,579
  • 25
  • 85
  • 144
6
votes
1 answer

Use file-loader and html-loader together

I'm working on an angular application which requires html files to be extracted as plain HTML files and at same time should check for any to require those images (as assets). In addition, images are based upon root path (so…
Francesco Belladonna
  • 11,361
  • 12
  • 77
  • 147
5
votes
1 answer

How to include static asset/image with svelte component and webpack?

I want to create a svelte component (based on webpack) which uses/imports a static image. How do I make sure that the image gets properly exported, i.e. that a svelte app using my component also sees the image? In my component, I tried importing…
Dominic
  • 4,572
  • 3
  • 25
  • 36
5
votes
0 answers

Webpack file-loader won't build PDF file

I'm coding with simple 'ol jQuery, sass, and html. I'm trying to create a simple PDF html download link, but I can't figure out how to compile pdf files using file-loader in my webpack config... and I'm wondering if file-loader is even the right…
SlaterJS
  • 51
  • 1
5
votes
1 answer

Webpack file-loader with sass-loader

I am new to nodejs and get a problem when trying to use sass with it. The following information is just fictional, but it represents the actual condition. THE SCENARIO: I have the following folder structure: frontend/ - scss/ - style.scss -…
Ari
  • 4,643
  • 5
  • 36
  • 52
5
votes
0 answers

"Invalid or unexpected token" on Node Express SSR of image imports

I am using url-loader as part of my webpack build process and its correctly moving the image files (or creating Base64 DataURL strings) for any image files that I import in my JS files, such as: import appleTouchIcon from…
Fenda
  • 1,385
  • 3
  • 14
  • 24
5
votes
0 answers

Webpack file-loader sets base64 src

File-Loader is not working properly for me, images are not showing up. My images are correctly placed in the dist/static/assets folder. So no issues on that. This is my config: test: /\.(png|jpg|gif|svg)$/, use: [ { loader:…
da1lbi3
  • 4,369
  • 6
  • 31
  • 65
5
votes
1 answer

Webpack4 : Moving / Importing Image Folder from "SRC folder" to "DIST folder"

I'm trying to import (move) my image folder from my src folder to my dist folder with Webpack 4 but unlike Gulp, this task looks SO complicated in Webpack even when I'm not even trying to mess around with the images at the moment, I just want…
Lowtrux
  • 156
  • 2
  • 12
  • 41
5
votes
3 answers

Webpack file-loader publicPath

I have a react project in which I'm using webpack 3.10.0 with file loader 1.1.6 to move some images and json files into my distribution folder. Webpack emits the files as expected, but react receives the wrong urls for my json and images assets My…
Mark Priem
  • 367
  • 2
  • 4
  • 16
5
votes
2 answers

Unable to load images using Webpack file-loader

According to the file-loader usage documentation I should be able to load images like: test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: {} } ] And later via: import img from './file.png'; Here is my…
チーズパン
  • 2,752
  • 8
  • 42
  • 63
4
votes
1 answer

Webpack 5 How to display images in HTML file

I use webpack for a small little application and so far it works pretty well, except that I have issues in displaying images - I get a 404. Here i my webpack config: const path = require("path"); const HtmlWebpackPlugin =…
ST80
  • 3,565
  • 16
  • 64
  • 124
1 2
3
…
19 20