2019/11/19 검색 결과

해당 글 3건

Webpack Guide for beginner #3

Webpack 기본 개발 환경을 위한 설정 앞선 챕터에서 webpack 의 기본 주요 속성들에 대해 알아보았습니다. 이번 장에서는 자주 사용되는 기본 개발 환경을 설정하면서 기타 유용한 사항들에 대해 알아보도록 하겠습니다. 참고로 여기서는 SASS, webpack-dev-server 등을 사용해 보도록 하겠습니다. webpack.config.js 개발환경 설정 사진 프로젝트 초기 생성 앞선 내용을 따라 왔다면 nodeJS 와 webpack global 이 설치되어 있을 것입니다. 만약 웹팩에 필요한 기본 설정이 되어 있지 않다면 이전 장을 참고하고, 여기서는 nodeJS 와 webpack global 이 설치되어 있음을 가정으로 진행합니다. 먼저 node, npm 버전을 확인 후 아래와 같이 디렉토리를 ..
Web Tech/Webpack 2019. 11. 19. 10:50

Webpack Guide for beginner #2

Webpack 환경 설정 맛보기 앞서 Webpack의 전반적 이해와 Webpack 사용에 필요한 선수 지식에 대해 알아보았으며, 이번 장부터는 Webpack에 대한 기본 환경 구성부터 진행해 보도록 하겠습니다. 사용자 코드작성과 번들 js 프로젝트 초기 설정 이제부터 새로운 프로젝트를 초기화하고, Webpack 을 설치해 보도록 하겠습니다. 아직까지 node.js 설치를 하지 않았다면 설치 후에 진행 바랍니다. Webpack 기본(일반적) 구성 절차 webpack 과 webpack-cli 전역 설치 npm init 으로 package.json 생성 src/index.js 와 index.html 생성 사용자 js 와 html 추가 webapck.config.js 파일 생성 webpack, webpack-c..
Web Tech/Webpack 2019. 11. 19. 10:44

Webpack Guide for beginner #1

Webpack 이란 무엇인가? Webpack 공식 사이트 소개 이미지 Webpack 페이지에서 소개하듯이 웹팩은 모듈 번들러(Module Bundler)입니다. 그렇다면 번들러(Bundler)란 무엇일까요? 번들러는 소프트웨어 및 일부 하드웨어와 함께 작동하는데 팔요한 모든 것을 포함하는 패키지라고 정의하고 있습니다. 이를 프로그래밍적으로 접근하자면 번들러란 필요한 의존성에 대해 정확하게 추적하여 해당하는 의존성들을 그룹핑 해주는 도구라고 할 수 있습니다. 다시말해, Webpack 은 공식 사이트 이미지에서 소개하듯이 웹페이지를 동작시키기 위한 서로 연관 관계가 있는 웹 자원(웹앱 애플리케이션의 구성파일)들인 js, css, img, webfont, etc.. 와 같은 구성파일들의 관계들을 Webpack..
Web Tech/Webpack 2019. 11. 19. 10:34