1

A beginner in webpack. I am trying to work with webpack+bootstrap. I added a background property in bootstrap sass file. it works fine if I use .png image. but when I use .jpg the compilation fails. Even if I rename the same .jpg to .png. It didn't work.

Error

ERROR in ./src/images/coffee-shop.jpg
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
  Referenced from: /Users/bruno/Downloads/bruno/projects/webpack/webpack-bootstrap/node_modules/mozjpeg/vendor/cjpeg
  Reason: image not found

    at Promise.all.then.arr (/Users/bruno/Downloads/bruno/projects/webpack/webpack-bootstrap/node_modules/execa/index.js:201:11)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 @ ./~/css-loader?sourceMap!./~/sass-loader/lib/loader.js!./~/sass-resources-loader/lib/loader.js?{"resources":["./src/resources.scss"]}!./src/app.scss 6:502-537
 @ ./src/app.scss
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app.js

webpack.config.js

module.exports = {
    entry: {
        app: './src/app.js',
        bootstrap: bootstrapConfig
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/, 
                use: cssConfig
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.(jpe?g|jpg|png|gif|svg)$/i,
                use: [
                  'file-loader?name=images/[name].[ext]',
                  'image-webpack-loader?bypassOnDebug'
                ]
            },
            { test: /\.(woff2?)$/, use: 'url-loader?limit=100000&name=fonts/[name].[ext]' },
            { test: /\.(ttf|eot)$/, use: 'file-loader?name=fonts/[name].[ext]' },
            // Bootstrap 3
            { test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, use: 'imports-loader?jQuery=jquery' }

        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        hot: true,
        open: true,
        stats: 'errors-only'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack bootstrap',
            hash: true,
            template: './src/index.html'
        }),
        new ExtractTextPlugin({
            filename: '/css/[name].css',
            disable: !isProd,
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new PurifyCSSPlugin({
            paths: glob.sync(path.join(__dirname, 'src/*.html')),
            purifyOptions : {
                minify : true
            }
        })
    ]
}

app.scss

.img{
    background: url('./images/coffee-shop.jpg');
    height: 300px;
    width: 300px;
}

Actually, both the images .jpg and .png is in the same folder. I double checked the spelling.. no mistake.. So there is something else which is not resolving the issue. Here is what I copied from command prompt

brunos-MacBook-Pro:webpack-bootstrap bruno$ cd src/images/
brunos-MacBook-Pro:images bruno$ ls
coffee-shop.jpg coffee-shop.png

Thanks

brunocoder
  • 65
  • 11

1 Answers1

3

Found the solution on github community. Run the below command and again make a webpack build. 

brew install libpng

No more error with jpg images. Don't know the reason How this library helped in resolving jpg images. But it worked :)

Thanks @Dummy - your suggestion helped me to find the answer.

brunocoder
  • 65
  • 11