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

How to fix 'module not found' for audio files using file-loader? Images, CSS, and JSON are working just fine

I'm new to building a browser game using Typescript/React/Redux/etc. and am trying to implement audio for the game. I've been attempting to import audio files in the same way I import image and json files, but so far to no avail. After adding mp3 to…
Michael Levesque
  • 101
  • 1
  • 3
9
votes
0 answers

React + SSR + webpack + node, unexpected token �PNG

I'm having webapp in react with server side rendering feature running on node server. I'm using local images from assets directory (as shown below: which is running fine on the…
Satish Lakhani
  • 445
  • 3
  • 10
9
votes
4 answers

Remove part of path for webpack file loader

I am setting up Webpack 3 and currently configuring asset management of static images that I would like to copy over from my src folder to my dist folder. I would like to keep the file structure of my /img folder in place as it copies over to the…
user3267755
  • 1,010
  • 1
  • 13
  • 32
9
votes
1 answer

Unexpected [path] in file-loader

For my image location: /src/assets/bitmap/sample.jpg Given are the key configurations: context: resolve('src') output: { path: resolve('builds/web'), publicPath: '', filename: ifProd('[name].[chunkHash].js', '[name].js') }, ... loaders: [ …
Daniel Birowsky Popeski
  • 8,752
  • 12
  • 60
  • 125
9
votes
3 answers

Webpack file-loader ignoring PNG files

I'm trying to output all image files through webpack file loader, webpack is ignoring images with PNG extensions however. Configuration works correctly on JPG files. My webpack config: const path = require('path'); const PATHS = { src:…
cermatej
  • 131
  • 1
  • 1
  • 5
8
votes
1 answer

Webpack ES6- Load Json with dynamic import (Preserve json file)

I'm trying to split my json files (2 files) into separated chunks. I was able to do it, but there is a "con". Those json's are converted into .js by webpack, that's why I added a file-loader to .json files, however the await import now returns a…
Leandro Soares
  • 2,902
  • 2
  • 27
  • 39
8
votes
2 answers

Image loading from root using relative path using--> webpack - file-loader - Angularjs

I'm loading images on my HTML, CSS and JS using Webpack. My Config is : { var path = require('path'); var webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin =…
Enigma
  • 749
  • 1
  • 13
  • 35
7
votes
2 answers

Webpack mini-css-extract-plugin @font-face url resolution issue

I am facing difficulty understanding the nature of URLs/paths and how they are resolved while using the mini-css-extract-plugin, file-loader and configuring their options such as the context and filename properties. I am developing a custom theme…
nooberson
  • 71
  • 1
  • 4
7
votes
4 answers

Webpack - How to convert jpg/png to webp via image-webpack-loader

I want to generate webp files from jpg/png from webpack. To do that i using image-webpack-plugin (https://github.com/tcoopman/image-webpack-loader) In the plugin documentation it's written that the webp additional optimizer "Compress JPG & PNG…
PedroZorus
  • 661
  • 1
  • 6
  • 21
7
votes
4 answers

url-loader / file-loader breaking relative paths in css output using webpack

I am using webpack with some plugins and loaders to take my src/ folder and build a dist/ folder. url-loader (which falls back to file-loader when images are larger than a specific limit) is outputting images it finds in my html and scss files to…
Jordan Walker
  • 550
  • 1
  • 5
  • 17
7
votes
0 answers

Why import default return "undefined" in TypeScript

I'm using file-loader to reference assets (images for example) but it return undefined: Project files (the dist/* files are generated by webpack) dist/ f74c4286ea273ec33454127cc4d1dee7.png main.js img/ img.jpg src/ …
Miaow
  • 864
  • 9
  • 23
7
votes
1 answer

Get wrong output path in webpack file loader

I can't get webpack (3.10) file-loader paths to work how I need it.. Here is an extract of my webpack.config.js // ... const images = { test: /\.(jpg|png|svg)$/, use: { loader: 'file-loader', options: { name:…
FNGR
  • 616
  • 1
  • 8
  • 21
7
votes
2 answers

What's the correct way to load .otf font files in webpack?

What is the appropriate way to load .otf font files when using webpack? I have made several attempts to include a rule in my webpack.config.js, without any success, based on many examples I've seen along the lines of the following: { test:…
abgregs
  • 1,170
  • 1
  • 9
  • 17
7
votes
1 answer

How to bundle images using webpack?

I am making an angular2 application with webpack module bundler. Now i have added file-loader for loading image files such as jpg, gif, png,etc. But when i run the build command the image files are not being bundled. Here is my…
kanra-san
  • 469
  • 6
  • 9
  • 21
7
votes
1 answer

webpack html-loaders lowercase angular 2 built-in directives

I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error. It appears that all angular2…
chungtinhlakho
  • 870
  • 10
  • 21
1
2
3
…
19 20