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
61
votes
3 answers

Url-loader vs File-loader Webpack

I'm trying to figure out the difference between url-loader vs file-loader. What does DataURl mean? The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.
stackjlei
  • 9,485
  • 18
  • 65
  • 113
31
votes
8 answers

Serving mp3 files using the webpack file loader

I have a problem with getting my mp3 files to work using the webpack file loader. This is the issue: I have a mp3 file on my harddisk, that if I open using chrome by for example "c:\somefolder\somemp3file.mp3" opens up in a tab in the browser and…
Øyvind Bråthen
  • 59,338
  • 27
  • 124
  • 151
25
votes
5 answers

Vue Cli 3 Local fonts not loading

When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to serif on #app. Fonts are not showing up in…
P. Jack
  • 455
  • 1
  • 5
  • 11
24
votes
2 answers

push assets folder to public directory with webpack

I'm using Webpack for the first time. Currently everything is being served up quite nicely. My problem is when I'm trying to build a dist folder. Currently I get my index.html and bundle.js files but I can't figure out how to push my assets to the…
Alex Marple
  • 2,908
  • 4
  • 17
  • 24
20
votes
1 answer

How to load assets correctly from webpack-generated NPM package?

I'm using webpack to generate the appropriate files for a npm package which will host a few react components. They have some CSS attached, which references some fonts and icons. When using the file loader, these assets are mis-referenced using their…
Pedro Nascimento
  • 13,136
  • 4
  • 36
  • 64
18
votes
3 answers

When using file-loader and html-loader in webpack the src attr of image is '[object Module]'

I am doing a project with webpack4 from scratch. But when I try to display an image in an HTML file, I face a weird problem: After npm run build, the src of image tag is built as
Nelson
  • 209
  • 2
  • 7
16
votes
3 answers

Webpack is not copying images to dist folder

I'm starting with webpack, but I'm really new on this and I'm stuck right now. My project copies my fonts correctly but not images. Now the only way I am able to make it work is by copying my images manually to the dist/img folder. This is my…
Alberto Molina
  • 175
  • 1
  • 2
  • 9
16
votes
1 answer

Using webpack with a .html entry

How can I webpack a web app into an output .html file, starting from a traditional input .html? Here is a simple starting point: index.html main.js import React from…
P Varga
  • 19,174
  • 12
  • 70
  • 108
16
votes
7 answers

Displaying a static image using React, Typescript and Webpack

I'm attempting to display an image in a React component as part of a project using webpack and webpack-dev-server. So far I have completed the following steps: Used npm to install file-loader Updated webpack.config.js to add a loader for image…
Montgomery 'monty' Jones
  • 1,061
  • 2
  • 14
  • 27
15
votes
2 answers

How to distribute fonts or other static assets with a React component library built using Webpack?

I am trying to include some fonts with a component library that I will distribute as an UMD bundle generated with Webpack and installed as an NPM module; the components make use of those fonts. The problem is that URLs pointing to the fonts in the…
xli
  • 1,298
  • 1
  • 9
  • 30
14
votes
4 answers

typescript cannot find module when import svg file

It's web application created with Typescript, React and webpack. I want to use svg file through webpack. However, I got TS2307: Cannot find module '~/images/slide.svg'. Typescript files are put on /frontend/src/, and typescript files are…
hideto
  • 175
  • 1
  • 2
  • 6
13
votes
2 answers

Webpack 4: css-loader + file-loader to add fonts and their stylesheets in the build process

Given this setup: fonts/styles.css @font-face { family: 'MyFont'; src: url('fonts/myfont.otf'); } How can I: in my JS bundle, obtain a reference to the URL of the CSS file, as a string, e.g. [name].[hash].css the generated CSS file should be a…
Dan
  • 9,912
  • 18
  • 49
  • 70
13
votes
3 answers

Module not found: Error: Can't resolve 'fs' Using Webpack

Hi im using socket io in my application. Which is requiring fs. when i try to bundle my javascript using below webpack config. im getting error can not resolve 'fs'. Module not found: Error: Can't resolve 'fs' in 'my application…
harish511
  • 187
  • 2
  • 2
  • 6
11
votes
3 answers

webpack file-loader duplicates files

I'm using webpack and it's file-loader + html-loader to emit files into my output directory. It works almost as expected, because it also duplicates those files. Here is a part of my webpack.config.js file: module.exports = { module: { …
Daweed
  • 1,419
  • 1
  • 9
  • 24
11
votes
1 answer

file-loader with jest and webpack gives me a

I am using ace code editor package which uses a webpack-resolver.js file in its package that has inline file-loader! in each require statement e.g. This works fine for my webpack config and everything builds fine when using it however when I go to…
Ruegen
  • 605
  • 9
  • 35
1
2 3
…
19 20