image - Webpack 对图像的编译时间很慢

Question

我有一个项目，其中图像是一个关键方面。我的 webpack 配置负责优化、调整大小并将这些图像推送到 dist/. 问题是此处理需要很长时间，因此对任何其他资产（例如 html、js 等）的简单添加（例如文件）会触发一切。我想使用DllPlugin并DllPluginReference查看是否可以减少输出项目所需的时间。我发现了很多关于如何将其与供应商代码一起使用的示例，但对于您自己的资源却一无所获。

我目前的设置是

//webpack.config.images.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
    entry: {
        images: ['./src/images.js']
    },
    output: {
        filename: 'assets/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(jpeg|jpg|png)$/,
                use: [
                    'file-loader?name=images/[name].[ext]',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DllPlugin({
           path: path.join(__dirname, '.', '[name]-manifest.json'),
           name: '[name]_library',
           context: __dirname     
        })
    ]
}

主要 webpack 配置：

//webpack.config.js

module.exports = {
    ...
    plugins: [
        ...,
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./images-manifest.json')
        })
    ]
}

我遇到的问题是：

1. 在生成的图像和清单中运行wepback --config webpack.config.images.js结果（太棒了！）还有 images.js（不是那么好 - 我不需要这个 - 图像应该放在distwith 中file-loader）

2. 如果我简单地运行webpack，则引用的清单不会生成图像。

我可能完全误解了如何DllPlugin在这里使用，并且很可能有更好的方法来实现我想做的事情。

标签： imagewebpackdllplugin