I am building an application that is being loaded as a plugin in other applications. Think grammarly or inter.
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, '/'),
},

I am building an application that is being loaded as a plugin in other applications. Think grammarly or inter.
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, '/'),
},

• javascript
• typescript
• webpack

Share Improve this question Follow asked Dec 6, 2018 at 10:48 Daniel HilgarthDaniel Hilgarth 175k4040 gold badges344344 silver badges449449 bronze badges 2

• 1 Can you add a little more information about your project structure? That would be really helpful. – aravindanve Commented Dec 6, 2018 at 11:01
• @AravindanVe Not sure what exactly you need to know. Can you clarify? – Daniel Hilgarth Commented Dec 6, 2018 at 17:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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/configuration/output/#output-filename