首页 文章

Webpack图像加载器只能缩小png

提问于
浏览 次
1

我仍然是webpack的新手，所以有一些出牙问题 . 最小化/加载的唯一图像是png . 我尝试过使用image-loader和url-loader，它们都有相同的结果 . 还尝试重新排序测试类型 .

这是使用file-loader在我的webpack.config.js文件中的配置

images: {
        test: /\.(gif|png|jpg|svg)$/i,
        exclude: /scss/,
        loaders: [
            'url-loader?limit=1&name=images/[path][name].[ext]&context=./resources/assets/src/images',
            'image-webpack'
        ]
    }

和文件加载器

images: {
    test: /\.(gif|png|jpg|svg)$/i,
    exclude: /scss/,
    loaders: [
        'file?name=images/[path][name].[ext]&context=./resources/assets/src/images',
        'image-webpack'
    ]
}

他们都有imageWebpackLoader

imageWebpackLoader: {
    optimizationLevel: 4,
    pregressive: true,
    interlaced: true,
    svgo: {
        plugins: [{
            removeViewBox: false
        }, {
            removeEmptyAttrs: false
        }]
    }
}

我的src树看起来像这样

├── content
│   └── registration-confirmation.png
├── decoration
│   ├── accordion-arrow-open.png
│   ├── accordion-arrow.png
│   ├── homepage-postcode-decoration.png
│   ├── paper-background.png
│   └── tape.png
├── homepage
│   ├── blast-from-the-past.jpg
│   ├── feature-arangement.png
│   ├── feature-delivery.png
│   ├── feature-flowers.png
│   ├── hero-mobile.jpg
│   ├── hero.jpg
│   ├── next-weeks-flowers.jpg
│   └── welcome.jpg
├── icons
│   ├── burger-menu-bar.png
│   ├── burger-menu-item-active.png
│   ├── checkbox-active.png
│   ├── checkbox-error.png
│   ├── checkbox.png
│   ├── copy-link.png
│   ├── dropdown-arrow-error.png
│   ├── dropdown-arrow.png
│   ├── email.png
│   ├── radiobutton-active.png
│   └── radiobutton.png
└── svg
    └── freddies_flowers_logo.svg

但构建看起来像这样：

.
├── decoration
│   ├── accordion-arrow-open.png
│   ├── accordion-arrow.png
│   ├── paper-background.png
│   └── tape.png
└── icons
    ├── burger-menu-bar.png
    ├── burger-menu-item-active.png
    ├── checkbox-active.png
    ├── checkbox.png
    ├── dropdown-arrow-error.png
    ├── dropdown-arrow.png
    ├── radiobutton-active.png
    └── radiobutton.png
javascript webpack

1 回答

  • 0

    看起来你的测试模式中有jpeg而不是jpg，所有文件都有jpg扩展名 .

    此外，name参数看起来很可疑 . 看起来您正在重复路径前部的图像子目录，但上下文参数已将图像指定为路径的一部分 . 是路径图像/图像？

    我会尝试以下方法：

    'file?name=[path][name].[ext]&context=./resources/assets/src/images'

    我也会尝试根本不使用context参数，而是使用 include ：

    images: {
    test: /\.(gif|png|jpg|svg)$/i,
    include: './resources/assets/src/images',
    loaders: [
        'file?name=[path][name].[ext]',
        'image-webpack'
    ]
}

    UPDATE

    我克隆了你的git repo，那些文件不是正在构建的应用程序的一部分，你可以考虑使用copy-webpack-plugin .

    否则，在应用程序中使用资源后，将复制资源以进行构建 .

    Example

    构建目录不包含 checkbox-error.png ，但它包含 checkbox-active.png . _checkboxes.scss 中有一个样式规则引用 checkbox-active.png 但没有引用 checkbox-error.png . 我添加了一个引用 checkbox-error.png 的样式规则，如下所示：

    &:checked.error {
        + label {

            text-decoration: none;
            $image: $img-icon-path + 'checkbox-error.png';
            @include pseudo-el(before, 32px, 30px) {
                background: url($image) no-repeat;
            }
        }
    }

    并重新运行构建 . 现在 checkbox-error.png 在输出目录中 .

    回复于

相关问题