1

I have a project where images are a key aspect. My webpack config is responsible for optimizing, resizing and pushing these images into dist/. The issue is that this processing takes a long time so a simple addition to any other asset (e.g. html, js etc) for example file triggers everything. I wanted to use DllPlugin and DllPluginReference to see if it was possible to reduce the time taken to output the project. I have found many examples of how to use this with vendor code but nothing with your own resources.

My current set up is

//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     
        })
    ]
}

Main webpack config:

//webpack.config.js

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

The issues I have with this are:

  1. running wepback --config webpack.config.images.js results in the images and manifest being generated (great!) but also images.js (not so great - I don't need this - the images should just be placed in dist with file-loader)

  2. If I run simply webpack, the referenced manifest doesn't generate the images.

I may be totally misunderstading how DllPlugin is to be used here and there is most probably a better way of achieving what I want to do.

Zakalwe
  • 1,444
  • 3
  • 14
  • 25

0 Answers0