웹팩 시작하기 튜토리얼 파트2 - 웹팩 적용 후
실습 절차 - 웹팩 빌드를 위한 구성 및 빌드
웹팩 빌드 및 빌드 결과물로 실행하기 위해 각 파일에 아래 내용 반영
// 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>
웹팩 빌드 명령어를 실행하기 위해
package.json
파일에 아래 내용 추가{ "scripts" : { "build": "webpack --mode=none" } }
위 scripts 카테고리가 커스텀 명령어를 정의할 수 있는 곳이다.
명령어 실행
{
"scripts" : {
"build": "webpack"
}
}
일단 "webpack"
으로 적고 명령어를 실행해보도록 하겠다.
npm run build