versioning css content

[josuelrocha]

Hello,

Is it possible to make this plugin also add filename versioning for images, fonts and etc that are called inside css?

[ctf0]

am not sure if its possible, does the original version() do that ?

[josuelrocha]

am not sure if its possible, does the original version() do that ?

yes, but hash is in query string and not in filename

[ctf0]

hashing the css content file names means that

• we first need to read all the css files to get its content
• read & hash the content
• finally hash the css file which depend on its content.

i think its doable but in some cases it might take forever to finish the build

[josuelrocha]

I forked Laravel-mix and modified it to have the hash in the file name.

Take a look: https://github.com/JosuelRocha/laravel-mix/commit/5b955246a8386e296114a7c5144039995eacfff0

I just changed the webpack rules!! I also made the changes straight through the webpack.mix.js file and it worked perfectly too, check out below

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: path => {
                                if (!/node_modules|bower_components/.test(path)) {
                                    return (
                                        Config.fileLoaderDirs.images +
                                        '/[name].[hash:8].[ext]'
                                    );
                                }

                                return (
                                    Config.fileLoaderDirs.images +
                                    '/vendor/' +
                                    path
                                        .replace(/\\/g, '/')
                                        .replace(
                                            /((.*(node_modules|bower_components))|images|image|img|assets)\//g,
                                            ''
                                        ) +
                                    '?[hash]'
                                );
                            },
                            publicPath: Config.resourceRoot
                        }
                    },

                    {
                        loader: 'img-loader',
                        options: Config.imgLoaderOptions
                    }
                ]
            },
            {
                test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
                loader: 'file-loader',
                options: {
                    name: path => {
                        if (!/node_modules|bower_components/.test(path)) {
                            return Config.fileLoaderDirs.fonts + '/[name].[hash:8].[ext]';
                        }

                        return (
                            Config.fileLoaderDirs.fonts +
                            '/vendor/' +
                            path
                                .replace(/\\/g, '/')
                                .replace(
                                    /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
                                    ''
                                ) +
                            '?[hash]'
                        );
                    },
                    publicPath: Config.resourceRoot
                }
            },
            {
                test: /\.(cur|ani)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:8].[ext]',
                    publicPath: Config.resourceRoot
                }
            },
        ],
    },
});

so I believe your plugin just rewrite the rules for webpack as in the examples I mentioned, and so your plugin will be complete, hashed in the filename for everyone.

[ctf0]

awesome, can u make a PR ?

[josuelrocha]

done

28

[ctf0]

awesome, will continue the conversation there