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:
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 indist
withfile-loader
)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.