webpack-plugin-asset-extractor

webpack-plugin-asset-extractor

This small webpack plugin allows you to set custom public paths for your assets as well as output paths. Main difference to file-loader is that outputPath and publicPath don't affect each other.

Usage

const AssetExtractor = require('webpack-plugin-asset-extractor');

const imageExtractor = new AssetExtractor({
    manifest: 'assets.json'
});

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    imageExtractor.loader({
                        hash:'sha512',
                        digest:'hex',
                        name: '[hash].[ext]',
                        publicPath: '/assets/images/'
                    }),
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            // ...
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // ...
        imageExtractor
    ]
};

Plugin Options

Name	Type	Default	Description
manifest	String	asset-manifest.json	Configure a custom filename with generated assets map filename to url

Loader Options

Name	Type	Default	Description
name	String or Function	[hash].[ext]	Configure a custom filename template for your file
context	String	this.options.context	Configure a custom file context, defaults to webpack.config.js context
publicPath	String or Function	/	Configure a custom public path for your files
outputPath	String or Function	'undefined'	Configure a custom output path for your files (within context)