Решение в ES6:

const buttonItems = document.querySelectorAll('.button-item');

for (let buttonItem of buttonItems) {
  buttonItem.addEventListener('click', (e) => e.preventDefault());
}

Источник: developer.mozilla

Или ещё лаконичнее:

const buttonItems = document.querySelectorAll('.button-item');

buttonItems.forEach((buttonItem) => buttonItem.addEventListener('click', (e) => e.preventDefault());

Источник: developer.mozilla

Чтобы настроить путь для разного вида ассетов (например, ещё для шрифтов), нужно добавить в rules тип 'asset/resource':

{
    test: /\.(gif|png|jpe?g|svg)$/i,
    type: 'asset/resource',
},
{
    test: /\.(ttf|eot|woff2?)$/i,
    type: 'asset/resource',
},

А в output добавить поле assetModuleFilename с функцией. В таком случае, все асcеты будут сохранятся по тому же пути, что и в папке src:

output: {
    ...
    assetModuleFilename: pathData => {
        const filepath = path.dirname(pathData.filename).split('/').slice(1).join('/');
        return `${filepath}/[name][ext]`;
    },
},