본문 바로가기

웹팩3

[webpack] 간단하게 알아보는 웹팩 데브 서버 설정 및 사용방법

webpack-dev-server를 켜 놓으면 코드의 변경사항을 감지해서 브라우저에 변경된 점을 자동으로 반영해 줍니다. webpack-dev-server를 사용해서 개발하면, 매번 빌드하는 명령어를 입력하고, 빌드를 기다릴 필요가 없습니다. 배포를 할 경우에만, 빌드를 해서 결과물을 받아서 서버에 넣으면 됩니다. 개발을 편하게 하려고 사용하는게 webpack-dev-server입니다. webpack-dev-server의 원리는 컴퓨터 메모리 상으로만 빌드한 결과물을 만들어서 브라우저에 웹팩 빌드 결과물을 전달합니다. 1. 설치 npm i -D webpack-dev-server 설치가 완료되면, package.json에 devDependencies 객체에 webpack-dev-server가 추가되었습니다.. 2021. 5. 30.

[webpack]실전편-간단하게 따라해보는 webpack 초기 세팅 방법

안녕하세요. 이번 글은 webpack을 처음부터 세팅해서 브라우저에 아래 웹을 띄워볼게요. 목차 준비물 1. 프로젝트 디렉토리 생성 2. 프로젝트 홈 경로에서 npm init -y 3. webpack과 webpack-command line interface 패키지를 설치합니다. 4. package.json에 script 객체에 "build": "webpack"를 입력합니다. 5. webpack.config.js 파일을 생성합니다. webpack의 기본 webpack 설정파일입니다. 6. app.js에 math.js를 임포트해줍니다. 7. 중간 빌드 : npm run build(건너뛰어도 됩니다. 뒤에서 빌드 합니다.) 8. CSS 웹팩 설정(loader 설치) 9. 파일(이미지)도 webpack 설정(l.. 2021. 5. 28.

[vue+express] webpack과 express 프레임워크를 사용한 vue App 개발환경 구축하기

개발 결과 시작하며... 시작의 발단은 스터디이다. node를 공부하려 들어갔지만, vue를 front로 붙이자며 시작한 것이 정말 어렵게 되었다. 처음에는 굉장히 쉽게 생각을 했다. 무슨 자신감이었는지 모르겠다. 하지만 이건 커피에 홍어를 찍어먹으면 맛있을 거라 생각하는 것만큼 큰 착각이었다. vue는 생각보다 어려웠다. 시작환경 [Window10] [Visual-Studio] [Node.js] ->설치되어 있음. 영상으로 개발하기 [vue+express] webpack과 express 프레임워크를 사용한 vue App 개발환경 구축하기 도움이 되셨다면 구독과 좋아요 부탁드립니다! https://www.youtube.com/watch?v=HHXnC6RfEyk 개발 순서 1. Webpack 설치 및 환경.. 2019. 8. 16.

티스토리툴바