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

@font-face doesn't upload local fonts and shows no errors (webpack)

Seems like it's a quite common problem but I couldn't find any solutions yet. I'm creating a project using webpack 4.41.2 where I need to use local fonts. Fonts are uploaded via @font-face. Here they are: @font-face { font-family: 'Roboto…
Lije Baley
  • 11
  • 2
1
vote
1 answer

Error trying to get local images in .vue files with my own webpack config

The real deal is that I’m learning webpack and trying to create my own vue template but I’m getting this issue that not happens in webpack-simple or others templates, and my config for images is pretty similar to what is normally used by…
Kaneda
  • 722
  • 5
  • 16
1
vote
1 answer

webpack - the file-loader is deleting images copied from CopyPlugin

I think I am Webpacking wrong. In my Webpack config I have a module rule to load files when they are encountered in the scss files, and I am also copying over a ton of other images using the CopyPlugin. The problem is that when I run Webpack in…
rugbert
  • 11,603
  • 9
  • 39
  • 68
1
vote
1 answer

Webpack wrong relative path in css and html

I have googled a lot, but I didn't find a clear solution to my question. Both my xxx.sass and index.html will reference the same xxx.png from images folder. But the webpack resolved to the wrong relative path. I use webpack ^4.41.2, file-loader…
Charlie
  • 2,141
  • 3
  • 19
  • 35
1
vote
2 answers

Webpack images from css file after build doesn't copy

When I run npm run build the images from .html files are loaded / copied. But the ones from the css file doesn't get copied in the final dist/assets/img folder. And if I use copy-webpack-plugin, everything is ok assets folder is copied. But I cache…
user11910832
1
vote
1 answer

Webpack file-loader not loading images, 404 error

I am developing a SpringBoot/React project that also uses webpack. I am simply trying to render an image that is stored locally in the project. I have tried using npm's file-loader endlessly, but to no avail. Whenever I run the application, I get a…
FortunateSonn
  • 11
  • 1
  • 2
1
vote
0 answers

Webpack file-loader serving images but not audio (mp3)

I'm writing a TypeScript application using Webpack and file-loader for serving images and audio. I can't get the webpack config to work with audio files. Im getting GET http://localhost:8080/media/d.mp3 404 (Not Found) The images work fine on the…
Karol Skrobot
  • 450
  • 3
  • 19
1
vote
1 answer

Webpack 4: how to copy a json file while adding a hash to the name, and link it in index.html

I'm upgrading to Webpack 4 from Webpack 3. In index.html I have the following: However it had stopped working after the upgrade. The…
Erez Cohen
  • 1,507
  • 2
  • 16
  • 25
1
vote
1 answer

Webpack 4: file-loader not loading assets in .css or .scss files

I'm trying to move assets (images and fonts) used in one of my .scss files, but it seems that they get ignored: This is my .scss file: @font-face { font-family: 'myfont'; src: url('../../assets/fonts/myfont.ttf') format('truetype'); …
danielrvt
  • 10,177
  • 20
  • 80
  • 121
1
vote
0 answers

Setting up file-loader in webpack produces error during build time

This is how my webpack.config.babel.js looks like: import path from 'path' import MiniCssExtractPlugin from 'mini-css-extract-plugin' const out = path.resolve(__dirname, './dist') const client = path.resolve(__dirname, './src/client') export…
Lelouch
  • 910
  • 6
  • 19
1
vote
0 answers

how to take assets from an external application folder in Vue?

I have a folder with images and folder with vue-app(archy) so i need to get in components those images I tried something like this, but didn't succeed
fleple
  • 95
  • 8
1
vote
1 answer

Webpack image doesn't load 404

Im working with react and webpack and I am trying to load images but getting 404. const ImageComponent = ({ path }) => ( ); The path is something like assets/images/img.png. Assets folder is near the src where all the…
tubu13
  • 924
  • 2
  • 17
  • 34
1
vote
1 answer

webpack css-loader + file-loader different results on win/mac

I have this case, working fine on Mac... but when I cloned the repo on a Windows computer the build generates different results (paths) and it's not working. All routes are relative to the build path: fonts/abc.ttf ttf file existing…
danikaze
  • 1,550
  • 2
  • 16
  • 34
1
vote
0 answers

webpack 4 path issues with images and js files

I am using webpack 4 and for some reason I can't get the .js files to go into a folder called /js/ and my image files will not go into a images folder. Here is my webpack configuration file. Ideally it would be nice to see the images retain the…
stargatesg1
  • 29
  • 8
1
vote
2 answers

Webpack file-loader duplicating public directory

I am using Webpack to output files into a dist folder. The directory structure is like so: client/public/dist inside which bundle.js and styles.css sit. My file-loader setup is: { loader: 'file-loader', test: /\.(png|jpg|gif)$/, options: { …
HPJM
  • 517
  • 8
  • 17
1 2 3
…
19 20