亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

webpack 源的多個文件夾

webpack 源的多個文件夾

皈依舞 2023-05-25 17:33:04
我是第一次使用 webpack,如果這是一個愚蠢的問題,我深表歉意。我想使用 imagemin-webpack-plugin 但我在兩個文件夾中有圖像。第一個是 img,第二個是 pages,但問題是這些文件夾中的所有圖像必須以相同的文件夾結構輸出??纯聪旅嫖业拇a部分。如何定義 imagemin-webpack-plugin 以從兩個文件夾讀取并保存到這些文件夾?const ImageminPlugin = require('imagemin-webpack-plugin').default,imageminMozjpeg = require('imagemin-mozjpeg'),imageminSvgo = require('imagemin-svgo'),glob = require('glob'),path = require('path');module.exports = {    plugins: [        new ImageminPlugin({            externalImages: {                context: '.',                sources: glob.sync('img/**/*.{png,jpg,jpeg,gif,svg}'),                destination: 'img',                fileName: '../[path][name].[ext]'            },            pngquant: ({quality: '80-100'}),            plugins: [                imageminMozjpeg({quality: 80, progressive: true}),                imageminSvgo()            ],            jpegtran: {progressive: true}        })    ],    module: {        rules: [            {                test: /\.(png|jpe?g|gif|svg)$/i,                use: [                    {                        loader: 'file-loader',                        options: {                            name: '../[path][name].[ext]'                        }                    }                ]            },        ]    }}
查看完整描述

1 回答

?
胡子哥哥

TA貢獻1825條經驗 獲得超6個贊

您可以簡單地為不同的圖像集多次包含插件,并對每個圖像應用不同的 imagemin 設置:


module.exports = {

? ? plugins: [

? ? ? ? new ImageminPlugin({

? ? ? ? ? ? externalImages: {

? ? ? ? ? ? ? ? context: '.',

? ? ? ? ? ? ? ? sources: glob.sync('img/**/*.{png,jpg,jpeg,gif,svg}'),

? ? ? ? ? ? ? ? destination: 'img',

? ? ? ? ? ? ? ? fileName: '../[path][name].[ext]'

? ? ? ? ? ? },

? ? ? ? ? ? pngquant: ({quality: '80-100'}),

? ? ? ? ? ? plugins: [

? ? ? ? ? ? ? ? imageminMozjpeg({quality: 80, progressive: true}),

? ? ? ? ? ? ? ? imageminSvgo()

? ? ? ? ? ? ],

? ? ? ? ? ? jpegtran: {progressive: true}

? ? ? ? }),

? ? ? ? new ImageminPlugin({

? ? ? ? ? ? externalImages: {

? ? ? ? ? ? ? ? context: '.',

? ? ? ? ? ? ? ? sources: glob.sync('pages/**/*.{png,jpg,jpeg,gif,svg}'),

? ? ? ? ? ? ? ? destination: 'img',

? ? ? ? ? ? ? ? fileName: '../[path][name].[ext]'

? ? ? ? ? ? },

? ? ? ? ? ? pngquant: ({quality: '80-100'}),

? ? ? ? ? ? plugins: [

? ? ? ? ? ? ? ? imageminMozjpeg({quality: 80, progressive: true}),

? ? ? ? ? ? ? ? imageminSvgo()

? ? ? ? ? ? ],

? ? ? ? ? ? jpegtran: {progressive: true}

? ? ? ? })

? ? ],

? ? module: {

? ? ? ? rules: [

? ? ? ? ? ? {

? ? ? ? ? ? ? ? test: /\.(png|jpe?g|gif|svg)$/i,

? ? ? ? ? ? ? ? use: [

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? loader: 'file-loader',

? ? ? ? ? ? ? ? ? ? ? ? options: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? name: '../[path][name].[ext]'

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ]

? ? ? ? ? ? },


? ? ? ? ]

? ? }

}



查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號