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
4
votes
0 answers

NEXTJS - How to load webm, mp4 files?

I am using NextJS and on my website I have some webm, mp4 files and I want to display it. Somehow everytime I try to build or start next dev, I get this error. I tried to use withVideos, webpack4, file-loader, url-loader, nothing is working as…
Michael
  • 121
  • 3
  • 6
4
votes
1 answer

Webpack file-loader not loading assets folder in production build

I've deployed my react application build in Webpack in netlify. I see the CSS, Fonts and everything else loading fine, but not the images under assets/images folder. Here's my folder structure in live site source path: my…
beta programmers
  • 513
  • 2
  • 8
  • 23
4
votes
1 answer

Django webpack loader: how to refer to static images compiled by webpack

I'm setting up webpack for a a Django application, for which django-webpack-loader appears to be the obvious choice. I can compile my js and scss files just fine, but I've hit a wall when it comes to loading in the images. My webpack.config.js file…
John Kealy
  • 1,503
  • 1
  • 13
  • 32
4
votes
3 answers

How to use wepb images in file-loader

I have a React App. I use a file loader in my project for loading images. This is how my config looks in the webpack file: module: { rules: [ { test: /\.(png|jpg|gif|svg|mp4)$/, use: [ …
Anna Miroshnichenko
  • 1,143
  • 1
  • 7
  • 24
4
votes
1 answer

How to use webpack file-loader with three.js?

im having trouble using webpack file-loader with three.js I tried two methods, 1: import jpg from "./assets/water.jpg"; const water = new Water(waterGeometry, { waterNormals: new THREE.TextureLoader().load(jpg, function(texture) { …
user11114318
4
votes
2 answers

How to import svg files and use them for src in image

I'm running into an issue that I can't seem to solve. I have a svg file that I need to include in my project. Since I've build my own boilerplate I want to have the same functionality as CRA in that I can use the svg as the image src. i.e.
Strahinja Ajvaz
  • 2,521
  • 5
  • 23
  • 38
4
votes
1 answer

How to config webpack for media assets & font for reactjs

I used a awesome boilerplate for react application, I wanna to use media like pictures or videos and fonts in my application. the reference link is here. How to config all required resources with react. I am getting error after add assets…
Hirani Vipul
  • 51
  • 5
4
votes
0 answers

webpack 4 - fileloader not working

[webpack.config.js] test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: 'file-loader', options: { name: 'img/[name].[hash:10].[ext]', } } ] [in frontend code(MainPage.jsx)] let imgURL =…
Mazs Li
  • 161
  • 6
4
votes
1 answer

webpack file-loader image to different directories

I have 2 different picture folder. - src / assets / img / img1.png - src / content / media / img2.png the dist directory output this: - dist / img1.png - dist / img2.png but should be like this: - dist / assets / img / img1.png - dist / content /…
Cem Firat
  • 390
  • 2
  • 21
4
votes
0 answers

Can't resolve file-loader when deploying to Heroku

I'm trying to deploy a React app to Heroku. In my app I use Flag Spirtes (https://www.flag-sprites.com/), so there's a folder and image of a flag in my directory. I've configured webpack to load it using file-loader and seems to work fine when I run…
doctopus
  • 5,349
  • 8
  • 53
  • 105
4
votes
2 answers

webpack file-loader load all files in a folder

I have a bunch of images in a folder and webpack file-loader loads only those referenced inside the html or css files. thats's fine. But I want all the images in the folder to be loaded in the final dist/images folder as well, wheter they are…
Amir Shahbabaie
  • 1,352
  • 2
  • 14
  • 33
4
votes
1 answer

Webpack relative css url() with file-loader / css-loader

Im quite new to webpack/npm and i'm trying to get my head around how to work with css urls in other project dependancies. Folder structure src fonts/ scss/ app.scss js/ app.js img/ index.html webpack.config.js var path =…
Samuel
  • 2,485
  • 5
  • 30
  • 40
4
votes
1 answer

Loading image files in production - React

I've built my first full React app, and it works beautifully. I load my dev-server and everything loads exactly as I would hope. Notably, my image files load perfectly. An example of a successful image load on my dev server:
Paulos3000
  • 3,355
  • 10
  • 35
  • 68
4
votes
1 answer

What does webpack file-loader do?

I'm learning to use webpack in recent days and I feel confused on webpack file-loader. As I know, we can use file loader to copy a file such as image, and customize or encode the name of the file and get a path returned. But I don't know why we need…
user6531368
3
votes
1 answer

Use glob pattern in typescript declaration files

I'm using file-loader, a webpack plugin that converts media imports as their URLs, so in import src from './image.png', src is a string. I know I can make typescript understand that by having this in some declaration file: declare module '*.png' {…
Nino Filiu
  • 16,660
  • 11
  • 54
  • 84
1 2 3
…
19 20