Webpack 5 can split build output into folders by type. For example, to put js and code maps in a separate folder (/build/js), one can have this in webpack config:
output: {
filename: 'js/[name].[contenthash:8].js',
},
To put images and fonts inside folder called media:
{
test: /\.(png|jpe?g|gif|ico|woff(2)?|ttf|eot|svg|json)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
generator: {
filename: 'media/[name].[contenthash:8][ext]'
}
},
For CSS:
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].chunk.css'
}),
Is it possible to achieve the same kind of flexibility offered by webpack, by using Angular CLI? By default (ng new test), it outputs everything into the same folder (/build/test), which on large projects is difficult to work with.
I checked similar Stack Overflow questions on this topic, like this one, they are either outdated (>5 years old) or don't have an answer. ng eject is no longer available in Angular.