프로그래밍/Webpack

[webpack] webpack 간단 입문

일단개그하다 2017. 7. 31. 00:33

npm을 사용하기 위하여 우선적으로 node.js를 설치한다

https://nodejs.org/ko/


위와 같이 디렉토리와 파일을 생성한다



위 package.json을 작성한다


"npm install --dev" 명령어로 모듈을 설치한다


설치가 완료 되면 위와 같은 설치한 모듈이 트리 구조로 나타난다




webpack.config.js

webpack을 실행시 사용할 설정 파일




html 파일




app.js 파일


webpack_start 디렉토리에서 webpack 명령어를 실행하면 위와 같이 번들링 결과가 나타나며


dist 디렉토리에 번들링 된 파일이 생성된다


dist 디텍토리의 index.html 파일을 웹 브라우저로 실행하면 위와 같은 페이지가 나타난다


app.js의 결과는 개발자 도구를 통하여 확인이 가능하다