Answer the question
In order to leave comments, you need to log in
How to properly transfer images after webpack compression?
There is such a webpack config (This is a common part of the dev and build config):
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ImageminPlugin = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminOptipng = require("imagemin-optipng");
const imageminSvgo = require("imagemin-svgo");
const PATHS = {
src: path.join(__dirname, './src'),
dist: path.join(__dirname, './dist'),
js: 'js/bundle.js',
css: 'css/style.css',
}
module.exports = {
externals: {
paths: PATHS,
},
entry: {
app: PATHS.src,
},
output: {
path: PATHS.dist,
filename: PATHS.js,
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/',
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]"
}
}
]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
options: {
sourceMap: true,
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
config: {
path: 'postcss.config.js',
}
}
},
{
loader: "less-loader",
options: {
sourceMap: true,
}
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: PATHS.css,
}),
new HtmlWebpackPlugin({
hash: false,
template: `${PATHS.src}/index.html`,
filename: 'index.html',
}),
new CopyPlugin([
{
from: 'src/fonts',
to: 'fonts',
},
{
from: 'src/img',
to: 'img'
}
]),
new ImageminPlugin({
bail: false,
imageminOptions: {
plugins: [
imageminGifsicle({
interlaced: true
}),
imageminJpegtran({
progressive: true
}),
imageminOptipng({
optimizationLevel: 5
}),
imageminSvgo({
removeViewBox: true
})
]
}
}),
],
}
Answer the question
In order to leave comments, you need to log in
Change file-loader options .
If you need all images to be accumulated in the img directory without saving the subdirectories in which they were stored in the src folder (for example src/img/articles/ => dist/img/ ) then
And emitFile: false serves to disable the output of files, since they are copied from you through the copy plugin.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question