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

Webpack file-loader exclude option not working as expected

In my webpack config, I want the file-loader plugin to drop all referenced images in the ./dist/images/ folder (including SVGs). At the same time, I would like the file-loader plugin to also drop all referenced font files (for font-awesome) in the …
Walter
  • 664
  • 1
  • 6
  • 19
0
votes
2 answers

Webpack not loading image extensions

How can I be able to make webpack load my image extension? I have images inside the scr folder as follows src/images/logo.png scr/images/pic1.png i am calling them in my html file as follows
Newton Karanu
  • 408
  • 5
  • 26
0
votes
1 answer

Override file from package in node_modules

I would like to use my core project and import it into my second project. I point to the App.js and so the entire core project is now visible in my second project. However, now I would like to override the logo that is being displayed at the top.…
yemerra
  • 1,352
  • 4
  • 19
  • 44
0
votes
1 answer

Webpack file-loader using function in outputPath gives EISDIR illegal operation on a directory

I'm trying to generate a certain output for my locale files that is like _locales/[locale_shortcut]/[file].json For this I'm using the file-loader plugin in webpack. According to the documentation, it's possible to use a function inside the option…
Eadwine
  • 65
  • 9
0
votes
0 answers

Cannot load background image in react

I am new to react and I am trying to set a background image with scss in react. However, I get an error in webpack: ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss Module not found: Error: Can't…
rajput sufiyaan
  • 61
  • 1
  • 14
0
votes
1 answer

How to parse .webp files with Webpack from pictute source HTML tags?

I'm using this webpack.config.js: module.exports = { // ... module: { rules: [ { test: /\.(jpg|png|gif|ico|svg|webp)$/, use: [{ loader: 'file-loader', options:…
netdjw
  • 5,419
  • 21
  • 88
  • 162
0
votes
1 answer

How to inject domain from environment variable into vuejs with require

I have a special use case where I need the full url to an image to render on the html side. Ex; Facebook Open Graph requires the full image url to work properly, relative image or absolute path won't work. I'm currently working in with @vue/cli and…
GabLeRoux
  • 16,715
  • 16
  • 63
  • 81
0
votes
1 answer

Webpack file-loader inject the same URL to the HTML and CSS file

The problem is file-loader will always inject the same URL to the both HTML and CSS files. I have got the flowing project structure Webpack File-loader configuration { test: /\.(gif|png|jpe?g|svg)$/i, use: [{ …
Shifut Hossain
  • 1,599
  • 3
  • 14
  • 24
0
votes
1 answer

Aurelia asking for strange ...xxxHTMLLINKxxx... file that is never there

My Aurelia app (which I took over from another programmer) keeps requesting a file: xxxHTMLLINKxxx0.241767597227476870.4882104576985471xxx and I can't find where it is coming from or how to stop it. Anyone?
Norm Strassner
  • 225
  • 3
  • 11
0
votes
0 answers

Webpack fileloader removes quotes in url path

I am using the webpack fileloader to copy all of my used webfonts to the dist directory with the following config: { test: /\.(ttf|eot|woff|woff2|svg)$/, use: { loader: "file-loader", options: { name:…
Domenico Sanchez
  • 11
  • 3
0
votes
1 answer

How to avoid hard coding file name?

I am using webpack to bundle my web application project. The webpack configuration looks as following: const HtmlWebPackPlugin = require("html-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const path =…
softshipper
  • 32,463
  • 51
  • 192
  • 400
0
votes
1 answer

How do I import files in a webpack process from something like PHP

So Webpack is for bundling stuff. It has a lot of use case it seems, but I'm new to it so I might be missing something or using it incorrectly. Currently it's probably mostly used for bundling JS and CSS and perhaps handling images with the…
Ingó Vals
  • 4,788
  • 14
  • 65
  • 113
0
votes
1 answer

Moving bundled css to a different directory changes URL prefix ../ to only /

I am trying to set up my webpack config (it's my first time with webpack) for multi-paged website(not SPA). Everything till now is going well but url paths for elements in css is not pointing to the right destination. I am using…
Ayan
  • 2,738
  • 3
  • 35
  • 76
0
votes
1 answer

Why does Webpack 2 output only one of my images?

I'm still fairly new to webpack 2 but I've got most of my configurations working so far. The only thing I'm having some difficulty understanding is that when I run "npm run build" to bundle my files into my "dist" folder I noticed that only 1 of my…
hgo
  • 3
  • 2
0
votes
1 answer

Unable to show local image using require and webpack

I am struggling to show local images in my react app. I am calling the image inside my render method using the require() function, like so: Not even importing images work, like: import icon…
Gabriel Schneider
  • 605
  • 2
  • 6
  • 12
1 2 3
…
19 20