javascript - Webpack 图像加载器仅缩小 png

Question

我对 webpack 还很陌生，所以遇到了一些初期问题。唯一被最小化/加载的图像是 png。我尝试过使用 image-loader 和 url-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 扩展名。

此外，名称参数看起来很可疑。看起来您正在路径前面的部分重复 images 子目录，但上下文参数已将 images 指定为路径的一部分。路径是images/images吗？

我会尝试以下操作:

'文件？name=[路径][名称].[ext]&context=./resources/assets/src/images'

我也会尝试根本不使用上下文参数，而是使用 include 来代替:

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

<小时/>

更新

我克隆了你的 git 存储库，这些文件没有被复制，因为它们没有被 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 位于输出目录中。