search

iampava / imagemin-webp-webpack-plugin

Webpack plugin which converts images to the WebP format while also keeping the original files.
MIT License
113 stars 27 forks source link

After webpack bundle can't read css background image #59

Open merri23 opened 3 years ago

merri23 commented 3 years ago

I have a problem. I converted all static images to .webp format. But in css files I have { background-image: url('./path/to/image.svg')} after bundle webpack can't read this one. I think webpack can't bundle this file, because in another css file I have ::before { background-image: url('./path/to/image.png')}... All css files where I have background-image can't bundle with webpack. In folder dist I didn't find it... Can you help me?

My webpack.config.js const path = require('path') const HTMLWebpackPlugin = require('html-webpack-plugin') const {CleanWebpackPlugin} = require('clean-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin')

plugins: [ new HTMLWebpackPlugin({ template: './index.html', minify: { collapseWhitespace: isProd } }), new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: 'css/[name].css' }), ], module: { rules: [ { test: /locales/, loader: '@alienfast/i18next-loader', }, { test: /.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, { test: /.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] }, { test: /.(png|jpg|gif|webp)$/, use: [ { loader: 'url-loader', options: { name: 'images/[name].[ext]', }, }, ], }, { test: /.svg$/, use: ['@svgr/webpack', 'url-loader'], }, { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /.jsx$/, exclude: /node_modules/, loader: 'babel-loader' } ] }