0

I have used webpack for my project.After compiling webpack background images stored in dist/img folder but in css file it is showing dist/img/filename..so image loading not properly...if image path ../img/file it will works..how i can do this..

this is my webpack.config.js file

module.exports = (env = {}) => {
    return {
        entry: ['./src/js/app.js', './src/scss/main.scss'],
        output: {
            filename: 'dist/js/app.js',
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].css',
                                outputPath: 'dist/css/'
                            }
                        },
                        {
                            loader: 'extract-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                    {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    use: [
                        {
                            loader: "file-loader?name=[name].[ext]&outputPath=dist/img/"
                        }
                    ]
                }
            ]

        }
    }
};
Sandeep Nambiar
  • 1,656
  • 3
  • 22
  • 38

1 Answers1

2

You have made a mistake in your output and loader config, do it like this:

var path = require('path');

module.exports = (env = {}) => {
    return {
        entry: ['./src/js/app.js', './src/scss/main.scss'],
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/'
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].css',
                                outputPath: 'css/'
                            }
                        },
                        {
                            loader: 'extract-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loader: "file-loader?name=img/[name].[ext]"
                }
            ]

        }
    }
};

anyways you can also use CopyWebpackPlugin to copy your assets in dist. I hope this would be helpful

Sakhi Mansoor
  • 7,832
  • 5
  • 22
  • 37
  • no it is not working...now imgage creating outside dist folder – Sandeep Nambiar Aug 31 '18 at 17:47
  • I have edited my answer. If that doesn't work try "file-loader?name=dist/img/[name].[ext]. actually it depends how are you managing your folder structure and webpack build config. If you can share your webpack config. this would be great – Sakhi Mansoor Aug 31 '18 at 17:49
  • What error you're getting ? I have little doubts on your `output` filename – Sakhi Mansoor Aug 31 '18 at 17:59
  • no error...but image creating outside dist folder...now i am getting this output footer { background-image: url(img/img_bg1.jpg); } but i need footer { background-image: url(../img/img_bg1.jpg); } output and image shoud store dist/img/img_bg1.jpg file...but now it is outide dist folder – Sandeep Nambiar Aug 31 '18 at 18:17
  • can you share it over github So I could dig into it. – Sakhi Mansoor Aug 31 '18 at 18:19
  • here is the PR:https://github.com/sandeepsimstream/webpack/pull/1 and I have edited my answer as well you cna merge the PR – Sakhi Mansoor Sep 01 '18 at 10:36
  • That depends how you are importing images. – Sakhi Mansoor Sep 01 '18 at 15:44