Ошибка при экспорте/импорте модуля webpack. В чем причина?

Question

[Дмитрий]

Пытаюсь освоить Webpack и не пойму в чем причина ошибки при импорте/экспорте модуля
Все делал как в примере на сайте, а получаю это:
Uncaught SyntaxError: Cannot use import statement outside a module
main.js

import bar from './bar';
bar();

bar.js

export default function bar() {
    console.log('h1');
  }

package.json

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "src/scripts/main.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"  
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {  
  context: path.resolve(__dirname, 'src'),
  entry: {
    app: [
      './scripts/main.js'
    ],
  },

  mode: 'development',

  devServer: {
    contentBase: path.join(__dirname, './src'),
    port: 3000,
    open: true,
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'scripts/[name].js', 
    publicPath: '../'
  },
};

Comments

[Сергей delphinpro]

Где конфиг вебпака?

Я не скажу точно за 5-ю версию, но разве он научился по умолчанию понимать es модули? Думаю, стоит использовать babel-loader.

[Дмитрий]

Сергей delphinpro, почему то стандартные настройки babel-loader не работают

[Сергей delphinpro]

Azazel1928, так у вас он и не установлен, и не сконфигурирован. как он работать-то будет?