Hello, I am using webpack to bundle my map application that uses ArcGIS API for JS 4.22.
In the output, many bundle files are created from @arcgis/core. (They are mixed with my other bundle.js files. And I have multiple entry points.)
It looks a bit messy, is there a way to let webpack generate these bundle files into a sub-folder of my JS folder?
Thanks!
Webpack version: 5.69.1 (I am not using arcgis-webpack-plugin.. Should I use it?)
File structure of the dist folder:
Dist folder structure
Generated bundle files:
My webpack.prod.js file:
const path = require('path');
const common = require('./webpack.common');
const {merge} = require('webpack-merge');
// minimize css for prod mode
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = merge(common, {
mode: "production",
devtool: false,
output: {
filename: 'js/[name].[contenthash].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath:"",
clean: true,
assetModuleFilename: 'images/[name][ext][query]'
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
optimization: {
minimizer : [
new CssMinimizerPlugin(),
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
})
]
})
Solved! Go to Solution.
This is expected behavior. The API takes advantage of dynamic import loading, especially when working with Portal items such as WebMap contents. The number of bundled files can vary from 200-300 depending on your tooling.
You can see a chart here of build metrics for various ESM samples we have.
https://github.com/Esri/jsapi-resources/blob/master/esm-samples/.metrics/4.22.2.csv
This is expected behavior. The API takes advantage of dynamic import loading, especially when working with Portal items such as WebMap contents. The number of bundled files can vary from 200-300 depending on your tooling.
You can see a chart here of build metrics for various ESM samples we have.
https://github.com/Esri/jsapi-resources/blob/master/esm-samples/.metrics/4.22.2.csv
Thank you!! The webpack sample is really helpful.