我正在配置 imagemin-webp-webpack-plugin 来转换我所有的 .png 和 .jpg 图片在我的 src/assets/images
中。至 dist/assets/images
.当我运行构建命令时,转换成功。所有图像都已转换为 webp 并分发到 dist/assets/images
.我认为“这很简单”,是时候创建 <picture>
了我的标签 src/index.html
文件开始引用 .webp 图像:
src/index.html:
<picture>
<source srcset="assets/images/img-hero-home-attorney.webp" type="image/webp">
...
...
</picture>
当我 npm run build
再次,这次我得到了:
ERROR in ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html)
Module not found: Error: Can't resolve './assets/images/img-hero-home-attorney.webp' in '/Users/**/**/**/**/**/**/src'
@ ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html) 6:33-87
这对我来说非常有意义。 src/assets/images/
中不存在这些图像因此 Webpack 无法解决这些问题。
所以现在我遇到了障碍:如何在我的 src/index.html
中引用 .webp 图像当这些图像只存在于 dist/whateverpath
上时在 jpg 和 png 被 imagemin-webp-webpack-plugin 处理后?
这是我的配置文件,希望对您有所帮助:
webpack.config.js
module.exports = {
entry: {
app: [
'./src/index.js'
]
},
output: {
path: path.resolve(__dirname, 'dist/'),
filename: 'assets/js/[name].bundle.js',
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin({
dry: false,
cleanOnceBeforeBuildPatterns: ['!index.html']
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
minify: false,
chunks: ['app']
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: '[id].css'
}),
new HtmlCriticalWebpackPlugin({
base: 'dist/',
src: 'index.html',
dest: 'index.html',
inline: true,
minify: true,
extract: false,
width: 1351,
height: 1200,
penthouse: {
blockJSRequests: false,
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new ImageminWebpWebpackPlugin({
config: [{
test: /\.(jpe?g|png)/,
options: {
quality: 85
}
}],
overrideExtension: true,
detailedLogs: true,
silent: true,
strict: true
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
loader: 'html-loader',
query: {
minimize: false
}
},
{
test: /\.(scss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(png|svg|jpg|gif|webp)$/,
use: {
loader: 'file-loader',
options: {
name: 'assets/images/[name].[ext]',
}
}
},
]
},
};
最佳答案
您可以使用 filemanager-webpack-plugin
将转换后的图像复制回您的 assets/images
文件夹 - https://github.com/gregnb/filemanager-webpack-plugin/
const FileManagerPlugin = require('filemanager-webpack-plugin');
plugins: [
new ImageminWebpWebpackPlugin({
config: [{
test: /\.(jpe?g|png)/,
options: {
quality: 85
}
}],
overrideExtension: true,
detailedLogs: true,
silent: true,
strict: true
}),
new FileManagerPlugin({
onEnd: {
copy: [
{
source: './dist/**/*.webp',
destination: './src/assets/images/',
},
],
},
}),
],
]
关于webpack - 在 imagemin-webp-webpack-plugin 生成这些图像后,如何加载这些图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63962037/