Webpack - Copy images files

Question

I'm currently using Webpack to pack our Angular2 application and i'm facing a problem.

I've read several documentations but I can't achieve how to copy some files in my output directory using the file loader.

Here is my current file hierarchy :

config
  | - webpack.common.js   
app        
  |- static
      | - css
           | - ...
      | - fonts
           | - ...
      | - img
           | - someimage.png
           | - anotherimage.png
  |- main.ts

and the (full) webpack.common.js :

var path = require("path")
var webpack = require("webpack")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {    
    entry: { 
      app: './app/main.ts',
    },
    output: {
        filename: 'js/[name].js',
        path:'./built',
        chunkFilename: 'bundles/[id].chunk.js'
    },


    module: {
        loaders: [
        {
            test: /\.ts$/,
            loader: 'ts',
            exclude:'./out/'
        },
        {           
             test: /\.(jpe?g|png|gif|svg)$/i,
             include: [
                 path.resolve(__dirname, '/app/static/img/'),
              ],
             loader: 'file?name=[path][name].[ext]&context=./src',

        }
        ]
    },

     resolve: {
         extensions: ['', '.js', '.ts', '.gif']
    },


     plugins: [
         new HtmlWebpackPlugin({
             template: './index.html'
         })
    ]
}

To execute webpack I play the command :

webpack --config Config/webpack.common.js  --bail

The ts file are correctly transpilled into javascript and copied into the output directory, the index.html file is also present but there is none of my image files.

I think there is something wrong in my configuration file but I can't see what. I'm banging my head on it fore many hours so any help will be much appreciated.

Thank you

score 1 · Answer 1 · answered Feb 28 '17 at 19:14

1

Creating separate entry point for images may not be what you want, depending on how you build CSS part of the project. As alternative you can copy static files with copy-webpack-plugin or grunt / gulp task.

answered Feb 28 '17 at 19:14

Alexander Lebedev

5,968
1
20
30

Venkata Dorisala · Accepted Answer · 2016-05-23T09:19:41.513

0

You should use url-loader to load images. Sample code is given below.

{
  module: {
    loaders: [
      { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true' }
    ]
  }
}

Are you referring the gif files or corresponding css/sass files inside your entry js file.

   entry: { 
      app: './app/main.ts',
    }

Webpack will load all the files which have a reference in the entry point. If all your files are not in one entry point. Then you can add multiple entry points as shown below.

   entry: { 
      app: './app/main.ts',
      image: './app/something.ts'
    }

Also, i would put webpack.config.js file directly in the root directory to have better access to the whole ecosystem. Try moving it from config folder to root folder.

edited May 23 '16 at 09:19

answered May 20 '16 at 16:20

Venkata Dorisala

4,783
7
49
90

I tried with url-loader but I have exactly the same result. It behaves as if the gif files are not found (I have no mention of this file in the logs - even in verbose mode). Maybe something is wrong in the path and / or context definition. – user30030 May 23 '16 at 07:50
So that means it works for other image types. are you having problem with only gif files? – Venkata Dorisala May 23 '16 at 09:14
No it doesn't works for any type of my "static" files (not only gif). For exemple, woff files are not copied – user30030 May 23 '16 at 11:53
Can you paste the code which uses those static files. You need to consume them somewhere in your code for them to be transpiled. – Venkata Dorisala May 23 '16 at 12:33
by the way i have updated the answer with some other options. Hope you tried them as well. – Venkata Dorisala May 23 '16 at 12:34
1

It works ; following your suggestion I add an entry containing an single image and the file was successfully copied (with the file-loader and url-loader) `entry: { appli: './app/main.ts', images : './app/static/img/background.png' ` } . Thanks – user30030 May 23 '16 at 14:17
1

Nice. You don't have to create another entry point just for images. I am sure you must be using these images in less/sass/css files. Then you need to add that particular file to your entry point which is /app/main.ts then those images will be automatically transpiled. – Venkata Dorisala May 23 '16 at 14:21
You're absolutely right, it was just a study case (not the best one I admit...) – user30030 May 23 '16 at 14:33

Webpack - Copy images files

2 Answers2