symfonywebpackwebpack-encore

Webpack Encore : Selective or partial versioning

I usually enable the versioning in Webpack, but is there to do it more selectively?

I need to keep one or more files unversioned.
Even better if I could have both, versioned and unversioned builds of these files.

My current config:

let Encore = require('@symfony/webpack-encore');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableSassLoader()
    .autoProvidejQuery()

    // I enable the versioning
    .enableVersioning(Encore.isProduction())

    // But i want an unversioned build of this file
    .addStyleEntry('blog_article', './assets/css/blog_article.scss')
;

const config = Encore.getWebpackConfig();
if(Encore.isProduction()) {
    config.plugins.push(new UglifyJsPlugin({
        uglifyOptions: {
            output: {
                comments: false
            }
        }
    }));
}

module.exports = [config];

Current output :

Desired output :

Solution

  • A year has passed, the question is probably solved, but I had a similar problem. I need to copy files from specific dir in assets without adding hash. According to Symfony webpack docs and Webpack docs, here is my solution.

    
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public_html/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .addLoader({
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        type: 'asset/resource',
    })
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
    // enables Sass/SCSS support
    .enableSassLoader(function(options) {
        // https://github.com/sass/node-sass#options
        options.sassOptions = {outputStyle: 'compressed'}
    })
    .enablePostCssLoader()
    // Copy files with hash
    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[hash:8].[ext]'
    })
;

// build the second configuration
const mainConfig = Encore.getWebpackConfig();

// reset Encore to build the second config
Encore.reset();

Encore
    .setOutputPath('public_html/build_editor/')
    .setPublicPath('/build_editor')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(false)
    // copy files without hash
    .copyFiles({
        from: './assets/editor_images',
        to: 'images/[path][name].[ext]'
    })

const editorAssetsConfig = Encore.getWebpackConfig();
editorAssetsConfig.name = 'editorAssetsConfig';

module.exports = [mainConfig, editorAssetsConfig];