Javascript 网页包图像加载器仅缩小png'；s_Javascript_Webpack

Javascript 网页包图像加载器仅缩小png'；s

javascript webpack

Javascript 网页包图像加载器仅缩小png'；s,javascript,webpack,Javascript,Webpack,我还是新的网页，所以有一些初期的问题。正在最小化/加载的唯一图像是PNG。我尝试过使用图像加载器和url加载器，它们都有相同的结果。还尝试重新排序测试类型下面是使用文件加载器在我的webpack.config.js文件中的配置 images: { test: /\.(gif|png|jpg|svg)$/i, exclude: /scss/, loaders: [ 'url-loader?limit=1&name=i

我还是新的网页，所以有一些初期的问题。正在最小化/加载的唯一图像是PNG。我尝试过使用图像加载器和url加载器，它们都有相同的结果。还尝试重新排序测试类型

下面是使用文件加载器在我的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'
    ]
}

它们都有ImageWebPackageLoader

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

看起来测试模式中有jpeg，但没有jpg，并且所有文件都有jpg扩展名

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

我会尝试以下方法：

'file？name=[path][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 repo，这些文件没有被复制，因为它们没有被webpack构建的任何JS或CSS引用。它们仅由静态HTML或Web包入口点之外的资产引用。网页包加载程序将仅复制在构建入口点时必须加载的文件。如果您想复制不属于正在构建的应用程序的文件，则可以考虑使用.< /P> 否则，在应用程序中使用资源后，这些资源将被复制到构建中

示例

生成目录不包括

复选框error.png

，但它确实包括

复选框active.png

。

\u checkbox.scs

中有一个样式规则，它引用了

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;
            }
        }
    }

然后重新运行构建。现在，

复选框错误。png

在输出目录中。