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

Loading Webpack handlebars images with file-loader

Not sure if I'm approaching this correctly, but I'm trying to use handlebars templates with file-loader in Webpack. The issue I'm having is the assets folder I have with images isn't being copied over to the dist folder, and the img src is being…
0
votes
1 answer

Is there a way to handle image with file loader when required in css with "background:url()"?

I'm using webpack to make cms templates. In some css file, I'm using some images like background-image: url('../images/space-bg.jpg'); All images are in the webpack folder, and I want webpack to push them to the public folder. For now I'm using in…
0
votes
1 answer

How to get JSON content in EJS file [WEBPACK]

I want to get values from an external JSON file and use these values in my EJS file which is compiled as HTML by webpack. My JSON & EJS working properly. I trying things like that in my EJS : <%= require('./components/products.json') %> But the…
PedroZorus
  • 661
  • 1
  • 6
  • 21
0
votes
1 answer

Webpack file-loader: Failed to load resource

Using webpack, I have a basic configuration like this: { entry: { 'example1': path.join(__dirname, '/demo/example1/app.ts'), 'example2': path.join(__dirname, '/demo/example2/app.ts'), }, output: { filename: '[name]/app.js', …
PierBJX
  • 2,093
  • 5
  • 19
  • 50
0
votes
1 answer

file-loader for fonts configuration in Webpack

Project structure /dev -/fonts -/css -/vendors -/fontawesome -/webfonts /dist -/my-project -/fonts With file-loader for Webapck, I´m trying to compile all sass/scss with url path and moved all font files into…
J.BizMai
  • 2,621
  • 3
  • 25
  • 49
0
votes
1 answer

react & webpack4 background-size not work

I'm new to set up webpack with React environment. The issue I have now is that background-size and background image do not work for the background image I set in react component. It worked when I set background-image and background-size and position…
ShinCat
  • 139
  • 3
  • 12
0
votes
0 answers

Loading Svgs with file-loader Web pack

In my webpack configuration, I have { test: /\.(woff|ttf|otf|eot|woff2|png|svg)$/i, loader: 'file-loader', } which correctly reads the file and produced a hash when I attempt to import the file (this is the console.log of the…
0
votes
0 answers

Is it possible to get file size statically from file-loader?

I have a static file that is dynamically fetched by the page via the URL I get from file-loader. The loading can take some time, so I want to show a progress bar, but the server doesn't return a Content-Length so the progress event has total set to…
riv
  • 6,846
  • 2
  • 34
  • 63
0
votes
2 answers

Require behaves differently in Angular project

If to write something like const theoretically = require('jasmine-theories');, require returns the content of the file. But if to set declare var require: any;, then next **require** executions steps inside webpack bootstrap function…
Alex Vovchuk
  • 2,828
  • 4
  • 19
  • 40
0
votes
1 answer

How to require static files dynamically in a react component's render method?

I need to request static files from a react component's render method based on a dynamic prop, it's id in my particular case. My folder structure is similar to this, the number of images in each gallery folder is arbitrary : -hardcode -id_1 …
Umbrella
  • 1,085
  • 1
  • 14
  • 30
0
votes
1 answer

How import all images from specific folder?

I have webpack for build project, and I wanna add all images from specific folder to my project folder. Path to images may be dynamic. How I understand, if I use js for entry point, I may add images only import in js. So I need add dynamic import in…
Drop
  • 1,394
  • 3
  • 15
  • 25
0
votes
2 answers

Why my Webpack does not loading background image?

I'm fairly new to webpack but having some problems with css-loader or file-loader in react I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image…
0
votes
1 answer

How do I use a hashed url in sass with webpack?

I've configured webpack caching using contenthash: { test: /\.(png|jpe?g|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[contenthash:7].[ext]', …
Ben McCann
  • 18,548
  • 25
  • 83
  • 101
0
votes
1 answer

How can I use one image in two bundle (scss) files with webpack and file-loader? The last one of them returns undefined

I have an issue with webpack (in combination with sass-loader and file-loader). I refer to an image in two different bundle (scss) files, where I point the background-image url to exactly the same path. The bundle file that I import first is show…
0
votes
1 answer

Images not loading in React app with Webpack despite having file loaders (url-loader)

I have a React app that uses Webpack and Babel. I am trying to load an image anyway possible (svg, png...) but I keep getting the error "Unexpected character '�' (1:0) > 1 | �PNG". I installed url-loader (npm install url-loader --save-dev) which is…
Emma O.
  • 25
  • 1
  • 6