번들링을 하지 않고… 그냥 하면 왜 안될까요?

webpack으로 번들링 하지 않고 직접

<script src="app/index.js"> 로 로딩하고

app/index.js 에 아래와 같이 작성해서

// index.js

import _ from 'lodash';

function component () {

var element = document.createElement('div');

element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}

document.body.appendChild(component());

브라우저로 index.html 을 띄우면 Hello webpack 이라는 글자가 나오지 않습니다.

크롬 개발자 도구에서 index.js 파일을 살펴보면 import _ from 'lodash'; 이부분에서

Uncaught SyntaxError: Unexpected identifier 라고 나오는데... 구문상의 애러는 없는것같은데 왜안되는지 궁금합니다.

참고로 같은 index.js 파일을 웹팩으로 번들링해서 띄우면 글자가 잘 나옵니다.

수업진행하실때 번들링을 안해도 되지만~ 이라고 하셔서.. 되야 하는데 안되서 이상합니다.
직접 npm install lodash --save 로 받아서 브라우저로 실행시키려면 어떻게 하면 되나요?