Question

我仍然是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

Answer 1

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

此外，name参数看起来很可疑。看起来您正在重复路径前部的 images 子目录，但context参数已指定 images 作为路径的一部分。路径 images / images ？

我会尝试以下方法：

'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'
    ]
}

<强>更新

我克隆了你的git repo，这些文件没有被复制，因为它们没有被webpack构建的任何JS或CSS引用。它们仅由静态HTML或webpack入口点之外的资产引用。 webpack加载器将仅复制在构建入口点时必须加载的文件。如果要复制不属于正在构建的应用程序的文件，可以考虑使用copy-webpack-plugin。

否则，在应用程序中使用资源后，资源将被复制到构建中。

示例

构建目录不包含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位于输出目录中。

Webpack图像加载器只能缩小png

1 个答案: