How to build with a stable package name?

[wansiedler]

What is the current behaviour? Right now every

preact build

creates a random bundle hash in the dist folder.

What is the motivation or use case for changing this behaviour? I would like to have a stable filename in order to use it in docker build.

Describe the solution you'd like

preact build --file bundle.js

[wansiedler]

e.g. I am trying to change the bundle file, so it would be consistent over builds. It doesn't work. As if preact-cli doesnt see it.

    output: {
        chunkFilename: '[name].[id].js',
        filename: '[name].bundle.js'
    },

How can that be changed?

[rschristian]

Sorry, was away from computer, didn't want to provide any solution without testing. This should work on non-esm files (need to take a peek yet on correcting those):

export default { 
    webpack(config, env, helpers, options) {
        config.output.filename = '[name].js';
        config.output.chunkFilename = '[name].chunk.js';
    },
};

Taken from https://github.com/preactjs/preact-cli/issues/924#issuecomment-584772285

[wansiedler]

thank you for the answer. sorry, does not work for me =(

[rschristian]

What doesn't work? You can copy/paste that directly into your preact.config.js.

[mjcarsjens]

Edit: my code below does not work as intended, look at @rschristian's reply below for a properly working code example!

Works fine for me, thanks! For those looking to do the same for esm module files, adding the following to the webpack function in preact.config.js seems to do the job:

const { plugin: babelEsmPlugin } = helpers.getPluginsByName(config, 'BabelEsmPlugin')[0];
babelEsmPlugin.options_.chunkFilename = '[name].chunk.esm.js';
babelEsmPlugin.options_.filename = '[name].esm.js';

Which would result in the following preact.config.js file:

export default {
    webpack(config, env, helpers, options) {
        config.output.chunkFilename = '[name].chunk.js';
        config.output.filename = '[name].js';
        const { plugin: babelEsmPlugin } = helpers.getPluginsByName(config, 'BabelEsmPlugin')[0];
        babelEsmPlugin.options_.chunkFilename = '[name].chunk.esm.js';
        babelEsmPlugin.options_.filename = '[name].esm.js';    
    }
} 

Need to do some more testing to see if this doesn't break anything but at first glance this seems to work as intended.

[rschristian]

Oops, guess I forgot to get back to this.

Thanks @mjcarsjens for adding the esm config! However, I believe that will break on build w/ prerender. You'll want to check that helpers.getPluginsByName(config, 'BabelEsmPlugin')[0] isn't undefined first.

export default {
    webpack(config, env, helpers, options) {
        config.output.chunkFilename = '[name].chunk.js';
        config.output.filename = '[name].js';

        const babelEsmPlugin = helpers.getPluginsByName(config, 'BabelEsmPlugin')[0];
        if (babelEsmPlugin) {
            babelEsmPlugin.plugin.options_.chunkFilename = '[name].chunk.esm.js';
            babelEsmPlugin.plugin.options_.filename = '[name].esm.js';
        }
    }
}

This should do the trick.

Edit: May as well toss in how remove hashes from CSS output as well while we're at it:

export default {
    webpack(config, env, helpers, options) {
        const { plugin: miniExtractPlugin } = helpers.getPluginsByName(config, 'MiniCssExtractPlugin')[0];
        miniExtractPlugin.options.filename = '[name].css';
        miniExtractPlugin.options.chunkFilename = '[name].chunk.css';
    }
}

[mjcarsjens]

Yeah you're right, not using pre-rendering in my current project at the moment but with it it does indeed break on build, but adding the undefined check solves that issue. Thanks for adding the config for CSS files as well for the full overview!

Edit: without the undefined check running a dev environment through preact watch will also break on startup, so the undefined check is in necessary in al scenario's.

[rschristian]

Closing this out now, figure we have covered all the bases.