Minification/Optimization of the files required using webpack file-loader

Question

When I do require('./something.html') in my code and configure file-loader to load html files something like this:

...
module: {
    rules: [
        {test: /\.html$/, loader: 'file-loader', options: {name: '[name].[hash].html'}
    },
}
...

Currently this will copy the original files to the configured output directory and replaces the require calls to those filenames with the generated file url. Which works perfectly.

I'm wondering if it's possible to further process the files in someway like further minification or optimizationusing any other loaders. Or perhaps process them to optimize in some way using any hooks or similar. Not sure if webpack provides that kind of hooks.

Is there any workaround to do this with file-loader?

I tried something like this but it doesn't seem to work. It's not minified.

{
    test: /\.html$/, use: [
        {loader: 'raw-loader'},
        {loader: 'html-minify-loader'},
        {loader: 'file-loader'}
    ]
}

Let me know if anybody has any workaround for this using webpack 2. Thanks.

Note: I know there is html-webpack-plugin for generating index.html which is not what I'm looking for. I'm working in angular js 1.x project and there are numerous template html files which I'm requiring using file-loader in the templateUrl to load them on the fly which already works great. Now I only need to minify those output template files.

The HTML Webpack Plugin contains options for HTML minification. Have you looked into that? (Check this link and look at the "configuration" options). https://www.npmjs.com/package/html-webpack-plugin — Tim Consolazio, Jan 26 '17 at 14:36
@TimConsolazio I have already looked into it. But that's not I'm looking for, this plugin is rather for generating an `index.html` file to serve bundles which is good. But mine is an angular js project and there are numerous template html files which I'm requiring using `file-loader` to load them on the fly which already works great. Now I only need to minify those output template files. — kabirbaidhya, Jan 26 '17 at 15:53

score 0 · Accepted Answer · answered Mar 22 '17 at 06:44

I couldn't find any way or plugin to do this job so, I created a custom webpack plugin and it did work perfectly in my case.

If anyone of you run into similar situation you may want to use this plugin too webpack-file-preprocessor-plugin

This is a very lightweight webpack plugin that allows you to pre-process files or assets loaded using file-loader before they're finally emitted.

As this is a very generic plugin you can use it to do any kind of custom pre-processing to assets just before they're finally emitted by webpack.

This example demonstrates how you can use this plugin to minify the html assets loaded using file-loader.

const webpack = require('webpack');
const WebpackFilePreprocessorPlugin = require('webpack-file-preprocessor-plugin');
const minifyHtml = require('html-minifier').minify;

module.exports = {
    entry: {
        app: './index.js'
    },
    output: {
        path: './public/dist',
        publicPath: '/dist/',
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: {
                    loader: 'file-loader', 
                    options: {
                        name: 'tmpl/[hash].html'
                    }
                }
            }
        ]
    },
    plugins: [
        new WebpackFilePreprocessorPlugin({
            // Prints processed assets if set to true (default: false)
            debug: true,
            // RegExp pattern to filter assets for pre-processing.
            pattern: /\.html$/,
            // Do your processing in this process function.
            process: (source) => minifyHtml(source.toString())
        })
    ]
};

Check this webpack-file-preprocessor-plugin for more information.

Minification/Optimization of the files required using webpack file-loader

1 Answers1