LHJ

I'm a FE developer.

웹팩 시작하기 튜토리얼 파트2 - 웹팩 적용 후

20 Sep 2020 » node_webpack

웹팩 시작하기 튜토리얼 파트2 - 웹팩 적용 후

실습 절차 - 웹팩 빌드를 위한 구성 및 빌드

  1. 웹팩 빌드 및 빌드 결과물로 실행하기 위해 각 파일에 아래 내용 반영

    // index.js
    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>
        <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
      </head>
      <body>
        <!-- <script src="src/index.js"></script> -->
        <script src="dist/main.js"></script>
      </body>
    </html>
    
  2. 웹팩 빌드 명령어를 실행하기 위해 package.json 파일에 아래 내용 추가

    {
      "scripts" : {
        "build": "webpack --mode=none"
      }
    }
    

    위 scripts 카테고리가 커스텀 명령어를 정의할 수 있는 곳이다.

명령어 실행

{
    "scripts" : {
        "build": "webpack"
    }
}

일단 "webpack"으로 적고 명령어를 실행해보도록 하겠다.

npm run build