Select to view content in your preferred language

Specifying webpack entry point for @arcgis/core npm library to bundle into DLL build

796
2
06-22-2023 09:04 AM
celliott
New Contributor

Hey all, I'm trying to create a DLL build with webpack that packages a number of npm dependencies so that they can be referenced within other webpack files. The issue I'm facing is that unlike some of the other dependencies, when I include @ArcGIS/core into the webpack.config.js entry vendor list and attempt to bundle it into the DLL build, I get errors that it cannot find a valid entry point/index.js file. 

Is there a something similar to an index.js file that I can use to specify as an entry point for the @ArcGIS/core module, or is there a way I can do something similar by creating my own entry point?

For reference, this is all I'm doing in the webpack.config.js file right now: 

 

module.exports = {
    mode: "development",
    cache: true,
    entry: {
        vendor: ["react", "@arcgis/core"]
    },
    plugins: [
        new webpack.DllPlugin({
            context: __dirname,
            name: '[name]_[fullhash]',
            path: path.join(__dirname, 'dist', 'manifest.json')
        })
    ]
}

 

2 Replies
ReneRubalcava
Frequent Contributor II

I was never able to get the DLL plugin to work with webpack. It might require scripting out all the files in the package to add, but even then, I don't know if it will work correctly with workers and wasm. Module federation might be an easier route. If you find a way, I'd love to hear about it.

0 Kudos
celliott
New Contributor

Will do, I'm still trying to experiment around with it. One thing I'm testing out is building my own entry point for @arcgis/core and I noticed if you add an entry point to an index.js file in the webpack.config.js, and in the index.js file you include a dynamic import with a template string for @ArcGIS/core like this, it can create a build of the entire dependency which is one step further:

 

const dependency = '';

import(
    /* webpackMode: "lazy-once" */
    /* webpackExports: ["default", "named"] */
    `@arcgis/core/${dependency}.js`
).then(() => {});

 


With dynamic imports using a template string, it looks like webpack has to include everything possible for that module in the build, but the downside here is the DLL plugin's generated manifest.json ends up generating invalid JSON. Seems like it doesn't like dynamic imports very much...