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
0
votes
1 answer

Can't resolve '/fonts/mem.woff2' in 'D:\Programming\Demos\webpack-compact\src' using absolute path

I am configuring Webpack in an existing project and I was avoiding to change the project structure. In the scss files I have includes that start with / (e.g. url('/fonts/mem.woff2')) and I believe this is the cause of my…
Bonomi
  • 2,541
  • 5
  • 39
  • 51
0
votes
1 answer

Webpack file-loader adjust public path

I have the following for my images folder: module.exports = { test: /\.(png|jpe?g|gif|svg)$/, include: config.paths.images, // this is: path.resolve(__dirname, '../assets/images') loader: 'file-loader', options: { …
RMH
  • 821
  • 2
  • 15
  • 38
0
votes
1 answer

issue with next.js file-loader, load image from JSON file (netlify cms)

I'm having an issue with images. I'm working on a project that uses Next.js, and Netlify CMS, which allows you use a CMS to upload content and images and it generates a JSON file, and I'm consuming this JSON file on my component. Everything is…
Natacha Romano
  • 21
  • 3
0
votes
1 answer

webpack: alias does not work in HTML tags

Is there any reasons why the alias below does not work in HTML tags or work in JavaScript? In my webpack config file: resolve: { alias: { '~': path.resolve(__dirname, './src/') } }, ... ... ... { test:…
Run
  • 54,938
  • 169
  • 450
  • 748
0
votes
1 answer

Vuejs image loading gives image not found

I am building a symfony web app and using Webpack Encore to compile VUE components for the frontend. In the vue component i am trying to load an image which gives me errors whatever i do and its not…
Girl Codes
  • 328
  • 4
  • 17
0
votes
1 answer

Insert images with [contenthash] generated by webpack

I want to add a content hash to the images generated in my webpack config. The files are output with a hash but I'm unsure how to get these inserted into my html. Html with is generated with pug and HtmlWebpackPlugin. Relevant bits of…
Zakalwe
  • 1,444
  • 3
  • 14
  • 25
0
votes
1 answer

Using file-loader to load binary file in react

I am trying to load a file from a folder using a name from react props. when I write this: import FileImage from '!!file-loader!../public/uploads/file-1589134024728.file'; everything works (but is static). In elements I…
Networking pup
  • 65
  • 1
  • 7
0
votes
1 answer

CSS URL issue with clean-webpack-plugin and file-loader

I'm struggling with adding Font Awesome to my webpack project. I use file-loader to get webfont files to static/webfonts/. Then I use mini-css-extract-plugin to extract css from bundle to static/css/. It results in wrong URLs such…
user7342926
0
votes
1 answer

Webpack 4 generates wrong src path for img tags in different levels of folder structure

I have a Webpack 4 project to make a multi language admin-dashboard with this folder and file structure: admin-dashboard | |--build | |--assets | | |--img | | |--font | |--fa | | |--index.html ----> rtl html output (gets wrong img src like…
Aspian
  • 1,865
  • 3
  • 24
  • 31
0
votes
0 answers

Not able to view the Uploaded image (on the backend server) using Webpack with url-loader/file-loader in React

I am working on a FileUploader ( Images for now) which will enable the user to upload multiple files to the backend server in one go. I have the following setup Webpack configured with url-loader supporting all kinds of images. I have a React…
ryan
  • 694
  • 9
  • 23
0
votes
0 answers

In VUE.js my local font is not working. I get error messeage in npm

I would like to import a ttf font file in to my VUE js file with webpack file loader and I get this error in npm. Im imported to the main.js my fonts.sccs where Im declarete the fontface. enter image description here "Invalid configuration object.…
Boglárka Knoska
  • 1
  • 1
0
votes
0 answers

Webpack console shows fonts in asset list but these fonts do not make it to browser

I am relatively new to webpack and think I have some gaps in my understanding as far as how certain pieces feed into each other. I am having trouble accessing the fonts I'm trying to pack up in my browser. I have rules and loaders for the font file…
user95227
  • 1,853
  • 2
  • 18
  • 36
0
votes
2 answers

How to load local images in React

I've been looking around for this for houres, and can't find a solution that works. I'm trying to add a local uri to and img element, but it it can't resolve it. import React from 'react' import image from '../assets/udemy2.PNG' const…
tsol_stack
  • 11
  • 3
0
votes
1 answer

How to repeat and copy src directories path in the same way in dist with file-loader?

I use webpack 3 and file-loader. I need a copy directory '/images/**' with the same relative path and files to my build directory. For example: I have 'src/images/icon/', 'src/images/bg/', 'src/images/temp/*' etc. And I need copy the same structure…
Kikambus
  • 1
  • 1
  • 2
0
votes
0 answers

Webpack : Could not load file starting with ".". Is there a way to load a file like ".gitignore" into the module?

{ test: /\.gitignore$/, use: [ 'file-loader', ] } is not working... Webpack ignores .gitignore files and doesn't find them. i want to use for like this. const module = await import(/* webpackMode: "eager" */ `${path}`);
kower
  • 1
1 2 3
…
19 20