Webpack图像装载机只缩小png的
我对webpack还不熟悉，所以有一些牙关问题。正在被最小化/加载的唯一图像是pngs。我试过使用图像加载程序和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'
]
}他们都有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回答 1
Stack Overflow用户
发布于 2016-05-26 15:00:24
看起来在您的测试模式中有jpeg，但是没有jpg，而且您的所有文件都有jpg扩展名。
另外，name参数看起来很可疑。看起来您在路径的前面重复图像子but，但是上下文参数已经指定图像作为路径的一部分。是路径图像/图像
我将尝试以下几点：
'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，这些文件没有被复制，因为它们没有被webpack构建的任何JS或CSS引用。它们仅由静态HTML或webpack入口点以外的资产引用。webpack装载机只会复制在构建入口点时必须加载的文件。如果您想要复制不是正在构建的应用程序的一部分的文件，可以考虑使用复制-webpack-插件。
否则，一旦在应用程序中使用这些资源，就会复制这些资源以进行构建。
示例
构建目录不包括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位于输出目录中。
https://stackoverflow.com/questions/37463921
复制相似问题
腾讯云开发者
