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

How to include images from CSS (backgrounds and etc.) to build folder using webpack?

I'm trying to use file loader to process images and include them into my build folder. Images which are inside html files appear in build but images from styles not. I keep my webpack config splitted into 2 files and use webpack merge module to…
Rantiev
  • 2,121
  • 2
  • 32
  • 56
1
vote
0 answers

Webpack 2 doesn't copy fonts and images

I have a webpack 2 config and it the following problems with it: 1) it does not copy images to dist folder 2) it copies fonts but adds 'css' to the name of font file. Here is the console error: GET…
Olga
  • 119
  • 1
  • 1
  • 12
1
vote
0 answers

Webpack file-loader cannot place image and icons in correct folder

Image 1 Image 2 { test: /\.(jpe?g|gif|png|jpg|svg)$/i, use: [ 'file-loader?name=assets/img/[name].[ext]', 'file-loader?name=assets/icons/[name].[ext]' //…
Aab
  • 23
  • 5
1
vote
1 answer

WebPack HTML and File Loader with programmatic img src

I'm using WebPack 2 and we're trying to specify an image name programmatically with Vue, and bind it in the HTML. Since the image name and path isn't bound until run-time, HTML and File Loader doesn't rewrite the url. Is there a way to tell…
user358089
1
vote
2 answers

Reference to static assets with vue + webpack in electron app

I am new to vuejs + webpack + electron and I am starting a new project with these tools. I have hard time retrieving the path to my asset in my tag. My project structure is the following: /my-project /app /components componentA.vue …
m.lapeyre
  • 477
  • 7
  • 18
1
vote
1 answer

Webpack file-loader ONLY outputs PNG files

I'm currently attempting to merge an existing project to webpack 2. One of the things I'm currently struggling with is the file-loader. Normally you'd expect that it grabs all image files from and background-image sources, and then place them…
Martin van Houte
  • 579
  • 6
  • 24
1
vote
1 answer

file-loader not working for jpeg

I am failing miserably to use file-loader in karma for purposes of testing. I get 404 errors, and when trying to debug in Chrome, the files wouldn't show in the sources tab under…
Ohad Navon
  • 1,693
  • 1
  • 14
  • 19
1
vote
0 answers

Webpack ExtractTextPlugin with boostrap-sass

I am using bootstrap sass and extract text-plugin to output the compiled css into a file. It works perfectly if I don't import bootstrap inside my style.scss, but when I import bootstrap webpack can't resolve the font paths. It looks for bootstrap…
1
vote
0 answers

Webpack file loader not creating or copying files in dist

Hey guys (using webpack 2.1.0-beta.22) so I have the following config in my webpack.base.js: entry: { client: "./client/index.js" }, output: { path: _.outputPath, filename: '[name].js', publicPath: '/themes/default/dist/' }, module:…
Otis Wright
  • 1,980
  • 8
  • 31
  • 53
1
vote
0 answers

Where do files emitted by file-loader live in the output bundle?

I have a simple Hello World-type web application. It simply displays the text "Hello, World!" with a background image. The app works as expected, but I would like to better understand how the image is bundled and served. When I run…
Matthew
  • 28,056
  • 26
  • 104
  • 170
1
vote
1 answer

How to prevent Webpack generating images in my output folder?

When I start webpack, it compiles my scss files and convert small files to base64. However, it also copies large images from my /img folder into the output folder. How can I prevent webpack doing this? I want that webpack left references to my…
1
vote
1 answer

How to handle png in css with loader

I'm packaging an Angular2 project with webpack. My app.component.ts is: import { Component } from '@angular/core'; import '../../public/css/styles.css'; @Component({ selector: 'my-app', template:require('./app.component.html'), styles:…
Xiaoxi Zhang
  • 670
  • 1
  • 5
  • 7
1
vote
1 answer

How to set material-css with webpack config?

Sorry to bother, because it could be a local problem. But it has been bothering me for days. Here is my webpack config: var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin =…
Sid Kwok
  • 11
  • 3
1
vote
1 answer

Some images loaded through Webpack file-loader are not found

I am working on a project which is bundling a pre-loaded set of stock images with the webapp using Webpack. There are about 400 images, half of which are thumbnails. Instead of writing 400 require statements, I create a new context and load them…
chazsolo
  • 7,873
  • 1
  • 20
  • 44
1
vote
1 answer

File-loader does not work with my fonts

I have a typical Webpack file with a loaders module for fonts, images, css as follows: module: { loaders: [{ test: /\.jsx?$/, loaders: ['react-hot',…
HGB
  • 2,157
  • 8
  • 43
  • 74