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
1
vote
2 answers

Webpack - Copy images files

I'm currently using Webpack to pack our Angular2 application and i'm facing a problem. I've read several documentations but I can't achieve how to copy some files in my output directory using the file loader. Here is my current file hierarchy…
user30030
  • 13
  • 4
1
vote
1 answer

Webpack file-loader copies to [dest]/[folder]/[file] instead of just desired [dest]/[file]

Windows 10. I'm following the React + Webpack tutorial on https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement and stuck at the point where we should copy index.html from app/ folder to dist/ folder. Instead of…
trickbz
  • 945
  • 1
  • 9
  • 25
1
vote
0 answers

Webpack image loader not working

I am trying to get my webpack to transpile my files into a public/images directory from the app/assets/images but for some reason it is not working. I have used the same script for my font files and all is working fine: WORKING { test:…
HGB
  • 2,157
  • 8
  • 43
  • 74
1
vote
1 answer

Webpack and file-loader not loading fonts

I have the following webpack scripts: const PATHS = { app: path.join(__dirname, 'app'), build: path.join(__dirname, 'build'), fonts: path.join(__dirname, 'app/assets/fonts') }; My files are bundled and output to the build directory and it all…
HGB
  • 2,157
  • 8
  • 43
  • 74
0
votes
0 answers

File-loader with html-loader not bundling the correct image source

I have a src folder and it contains images forlder, sass folder, js folder (inside it has index.js), and index.html file.(I also included a screenshot of the project tree) When I run npm run build, it creates an images folder in the dist folder…
0
votes
0 answers

Resolve Webpack "The image cannot be displayed because it contains errors." + File Loader Issue

I want to use an image in a scss file as a background image. I'm using webpack@5.76.2 My question: how do I resolve the following error that results when referencing images through scss files using Webpack: "The image “{PATH}” cannot be displayed…
Ryan Dorn
  • 679
  • 2
  • 8
  • 20
0
votes
1 answer

WebPack images not loading using file-loader

Currently, I have a webpack 5 project that requires several svg images and a background image. The svg images are coded into the template.html file. and the background image is referenced in the style.css file. When I run the build, none of the…
0
votes
1 answer

How to get hosting URL of a CSS file in NextJs

I needed to host a CSS file and load it to an iFrame on the page. I have successfully used file-loader in a Preact project. But when I use it in NextJs, it does not work. It does not give any error. Actually, it gives a relative path of the CSS…
Devs love ZenUML
  • 11,344
  • 8
  • 53
  • 67
0
votes
1 answer

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 code in both development and product mode …
0
votes
1 answer

webpack and file-loader seems to point to default: and not server url

I had a working project with webpack 4, upgraded to 5 as well as all plugins to latest.. I was able to resolve most of the weird issues this migration presented thus far. I am able to build and run the project, the output folder seems almost the…
TacB0sS
  • 10,106
  • 12
  • 75
  • 118
0
votes
0 answers

How fix this error :currently no loaders are configured to process this file?

I create larval 8 and react mix projects. I add three js for that project. It has hdr-type assets in the assets folder. I got the below error. Can you help me to fix this error?
Nirodha Lakmali
  • 105
  • 1
  • 1
  • 10
0
votes
3 answers

File-loader creating 2 images and linking the wrong one

file-loader is creating two separate images in my build folder. One is the named correctly and saved in the correct path, the other is named [hash].png (which is the default) and is stored in build, not build/images. The second incorrect file is 0…
William
  • 77
  • 8
0
votes
1 answer

webpack relative url in css, creating copied export svg files

I have the below webpack.config. I'm trying to use relative url in my style.css to point to some svg files. The problem is the relative url is referencing a copy of the svg file which is just an export statement. Does anyone know why my…
mgmedick
  • 686
  • 7
  • 23
0
votes
0 answers

How to use google fonts in manually created React app?

I created React app manually (not create-react-app) one by one such as index.js, App.js, index.css, components folder etc because I am using React app as a separate app in the Django project. And in order to use google fonts, I followed this…
SatelBill
  • 641
  • 2
  • 12
  • 28
0
votes
0 answers

Custom webpack config for PDFs using next-compose-plugins

General recommendation for processing a PDF file in Webpack keeps pointing me back to: https://webpack.js.org/loaders/file-loader/ Webpack documentation doesn't really explain static generation, and Next's config documentation doesn't really explain…
serraosays
  • 7,163
  • 3
  • 35
  • 60