CODEWITHSUNDEEP
javascripttypescriptwebpack
Daniel Hilgarth
Daniel Hilgarth

Reputation: 174329

Use chunkhash only for some output files in webpack

I am building an application that is being loaded as a plugin in other applications. Think grammarly or intercom.
So, I will have a javascript file (the loader) that customers need to reference in their application.
This file in turn adds an iFrame and loads my index.html which references my main bundle.

Now, I want to have the loader to not have a chunkhash in its filename but the bundle should have the chunkhash.

Possible? If so, how?

My webpack config (ejected from create-react-app-typescript): 

entry: {
    app: [require.resolve('./polyfills'), paths.appIndexJs],
    loader: "./src/integration/loader.ts"
},
output: {
    // The build folder.
    path: paths.appBuild,
    // Generated JS file names (with nested folders).
    // There will be one main bundle, and one file per asynchronous chunk.
    // We don't currently advertise code splitting but Webpack supports it.
    filename: '[name].[chunkhash:8].js',
    chunkFilename: '[name].[chunkhash:8].chunk.js',
    // We inferred the "public path" (such as / or /my-project) from homepage.
    publicPath: publicPath,
    // Point sourcemap entries to original disk location (format as URL on Windows)
    devtoolModuleFilenameTemplate: info =>
        path
            .relative(paths.appSrc, info.absoluteResourcePath)
            .replace(/\\/g, '/'),
},

Upvotes: 3

Views: 2418

Answers (1)

aravindanve
aravindanve

Reputation: 1069

Why not use a function for filename.

...
output: {
    ...
    filename: (chunkData) => {
        return chunkData.chunk.name === 'loader'
            ? '[name].js'
            : '[name].[chunkhash:8].js';
    },
}

See https://webpack.js.org/configuration/output/#output-filename

Upvotes: 11

Related Questions