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
1
vote
0 answers

Webpack file-loader custom path

I'm having multiple entries like this: entry:{ 'dist/folder1/video.mp4': 'src/folder1/video.mp4', 'dist/folder2/otherfolder/video2.mp4': 'src/folder2/otherfolder/video2.mp4' } I'm using file-loader for handling the .mp4 files and i want to…
Hexxen
  • 43
  • 5
1
vote
0 answers

Webpack2- Using file-loader loaded URLs of dependency project

I have a library that is packaged using webpack. I've used file-loader with below config: { //file-loader config of library test: /\.(tsv|json)$/, loader: 'url-loader?name=[name].[ext]' } When a webpack build is run, the files are…
knomdlo
  • 398
  • 2
  • 14
1
vote
1 answer

Cannot load video files with Webpack 3 and File-Loader

I'm loading assets with file-loader in Webpack3 and everything works well for common images types but when I try to load videos (MP4, MOV ...) it seems that it can't detect those. Here's the code to load assets in my webpack.config file: { …
user990463
  • 439
  • 1
  • 7
  • 27
1
vote
1 answer

accessing resources within nested react-routes using webpack file-loader

I have recently switched my routing using react-router from hashHistory to browserHistory. There is a problem though. Everytime I access a nested route and try and refresh the page, public resources such as my logo can't be found as it uses the…
1
vote
2 answers

Local image not loading in React

Very new to storing local assets on React. I've configured webpack with file-loader and image-loader and stored the images locally, but for some reason it doesn't seem to be showing: import React, { Component } from 'react'; import WorkItem from…
doctopus
  • 5,349
  • 8
  • 53
  • 105
1
vote
2 answers

Make webpack ignore a directory

I'm making a chrome extension that injects content scripts. I don't want Content scripts to be processed by webpack. My directory structure: /extension |-manifest.json |--scripts |- background.js |- content |-- script1.js |--…
1
vote
0 answers

image files not showing up - using webpack file loader

I have been trying to load images using webpack, but somehow it's not working. here's the related code { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]' }, and here's one example of the component where the image should…
faraz
  • 2,603
  • 12
  • 39
  • 61
1
vote
1 answer

Webpack file-loader only works on windows but not on mac

I have a React project that uses webpack with some file-loader rules. I was trying to import/require an image in my React component (JSX) like this: in a macOS computer and it throws this…
1
vote
1 answer

Serve apple-app-site-association with webpack

I'm new to webpack and I can't seem to find a way to serve the Apple Universal Links file under / using webpack. Could you please advise how to get /apple-app-site-association working?
Juampa
  • 2,035
  • 2
  • 25
  • 35
1
vote
1 answer

AOT build with file-loader outputPath turns img tag into string

I am encoutering an issue when trying to build a AOT build with the file-loader outputPath option on. The resulting output is a tag surrounded with quote marks ("world"). This only happens in my AOT build and…
Mr.wiseguy
  • 4,092
  • 10
  • 35
  • 67
1
vote
0 answers

How to set multi-path to export image files with Webpack file-loader

I'm researching Webpack to build my module bundle. I use file-loader to load image files in javascript. These line is used to load image files: { test: /\.(jpe?g|png|gif|svg)$/i, use: [ { loader: 'file-loader', …
Tommy Pham
  • 21
  • 3
1
vote
0 answers

Webpack file-loader not emitting font files

My project file structure: - dist - src - assets - fonts webpack.config.js I have the following webpack config entry for file loader: context: path.join(__dirname, 'src'), output: { path: path.join(__dirname, 'dist'), …
Bob
  • 821
  • 1
  • 17
  • 36
1
vote
0 answers

Best way to export my library images

I've developed a library which has some images. I'm using file-loader in order to export them in my production into a res folder. So my distribution folder look as follow ./dist --- my.core.js --- my.core.css --+ res --- img1.png ---…
Raziza O
  • 1,560
  • 1
  • 17
  • 37
1
vote
1 answer

Webpack file-loader not loading files with complex paths

I've got a project that uses Typescript 2.4.1, Webpack 2.6.1, and I'm having some issues getting relative paths to load my images correctly. If I put an image in the same folder as my .ts file that loads it, I can get it to work: const background =…
CorayThan
  • 17,174
  • 28
  • 113
  • 161
1
vote
0 answers

Webpack fileloader background

somebody who can help me?i use file-loader to handle images which in sass,after compiled,the file of css is .b { width: 100px; height: 100px; background: url([object Object]); } before: .b{ width: 100px; height: 100px; …
H.jame
  • 79
  • 1
  • 6