실제로 웹팩 적용해보자!

// kks.js
// import 구문 추가
**import _ from 'lodash';**

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

/* index.html */
<html>
  <head>
    <title>Webpack Demo</title>
		/* cdn 스크립트 삭제 */
    <!-- <script src="<https://unpkg.com/[email protected]>"></script> -->
  </head>
  <body>
		/* 삭제 */
    <!-- <script src="src/index.js"></script> -->
		/* 스크립트 추가 */
    **<script src="./build/main.js"></script>**
  </body>
</html>

차이점.

<aside> 💡 1. 기존에 cdn으로 가져오던 lodash를 kks.js 파일에서 직접 import 구문으로 가져온다.

  1. index.html에서 kks.js를 불러오던것을, dist폴더 하위에 있는 main.js를 불러온다.

</aside>

웹팩 실행 🚀

스크린샷 2022-07-26 오후 2.28.34.png

<aside> 💡 build 명령어에 webpack을 써줌으로써…. npm run build를 했을때 webpack 을 실행하도록 한다.

</aside>

스크린샷 2022-07-26 오후 2.29.52.png

“웹 팩을 돌렸다!! 😍

.

.

.

.

.

.

? 오류 ?