Após geração do arquivo bundle com um filename diferente de bundle.js, a aplicação não funciona

Bom dia. Segui os passos do curso até aqui, mas utilizei versões diferentes do webpack e do babel. Seguem abaixo:

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2017": "^6.24.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }

Construí o arquivo webpack.config.js exatamente como mostrado no curso, com uma única diferença: escrevi o filename como bundle-file.js

const path = require('path');
const pathToDistfolder = path.resolve(__dirname, 'dist');

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle-file.js',
        path: pathToDistfolder
    },
    module:{
        rules: [
            {
                test: /\.js$/,  //Regular expression to inform that webpack shall get all the files that ends with .js
                exclude: /node-modules/, //Ignores all files inside the node-modules
                use: {
                    loader: 'babel-loader' //Informs how webpack shall process the file. We use babel-loader so the typescript scripts inside our project could be processed as a JS code before webpack process it and creathe the bundle file
                }
            }
        ]
    }
}

Quando rodo o comando abaixo (bundle-dev), ele executa tudo sem qualquer mensagem de erro no console... entretanto, quando rodo o servidor, a aplicação não consegue mais "Importar Negociações". Alguma ideia da razão disso acontecer?