I am trying to do a webpack project but every tutorial I see on the internet uses the same folder for assets and distribuition, but I would like to know if there's a better way to manage assets and static files in a folder and than build everything in a Dist or Build folder later.
The structure would be:
| /src -> every coding including css and other html pages.
| /public -> index.html, favicon.ico...
| /public/assets -> put images and other stuff here
and later:
| /dist -> combine everything in here: index.html, js files and assets.
That should be the point of file-loader
Add this rule to webpack.config.js
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
outputPath: 'assets',
publicPath: 'assets',
},
}
In webpack5, the rule can be this one, click asset-modules for more details
{
type: 'asset/resource',
test: /\.(png|jpe?g|gif)$/i,
generator: {
filename: 'assets/[hash][ext][query]'
},
}