티스토리 뷰
프론트앤드 백앤드 웹개발을 시작해보려합니다
어렵게 설명하는건 이해하기 어려워서 직접 공부하면서 내 식대로 이해한걸 편하게 적으려고합니다.
내가 이해한 내용이 틀릴 수 있지만 문서공유를 한다는것에 의미를 둡니다.
우선 웹팩이 무엇일까?
웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러로
HTML, CSS, img 등 프론트엔트 자산들을 하나로 변환할 수 있다.
라고 정의되있는데 왜 쓰는지 되게 단순하게 생각하면될거같다.
USB에 1GB파일 한개를 옮기는 것 vs 여러개로 분할됐지만 총 합 1GB파일 한개를 옮기는 것
1GB파일 한개를 옮기는게 훨 빠르고 눈에 쉽게 들어온다. 그런의미로 생각하면 될 것 같다.
툴은 visual studio code 선택. 이유는 없고 그냥 대세라고 하길래 받았다.
1.
먼저 디렉토리를 만들고
mkdir webpack-demo
cd webpack-demo
npm초기화
npm init -y
-y가 뭔지 몰랐는데
npm init -help 입력하면 도움말이 나옵니다.
--yes를 약어 -y로 사용가능.
npm 초기화때 ~~하실거에요? 이런거 물어보는거 전부다 Yes처리하는 명령어
다 진행되면 해당 폴더에 package.json라는 파일이 생긴다.
로컬로 webpack, webpack-cli 설치
npm install webpack webpack-cli --save-dev
다 진행되면 package.json에 다음과 같은 코드가 추가된다
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
dependencies와 devDependencies의 차이점은 실제 상품에서 사용할 패키지와 개발용 패키지의 차이이며, 개발 시 필요한 라이브러리들은 devDependencies에 적어주고, 서비스 할때 사용되어야할 라이브러리들은 dependencies에 넣어준다.
--production 옵션으로 빌드하게 되면 --save-dev 옵션으로 설치한 모듈들은 포함되지 않으며
--save 옵션으로 설치한 모듈들은 포함됩니다.
디렉토리, 파일 및 해당 내용을 작성
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());index.js
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>index.html
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}package.json파일을 위와 같이 변경한다.
private는 개인 저장소의 우연한 발행을 방지하기 위해 npm에서 패키지의 공개 여부를 지정합니다.
이제 indext.html을 실행....
'[웹] > WebPack' 카테고리의 다른 글
| [WebPack] 코드분할 방법 (0) | 2019.11.29 |
|---|---|
| [WebPack] webpack-dev-server 서버 구축 (Step5) (0) | 2019.11.27 |
| [WebPack] HtmlWebpackPlugin (Step4) (0) | 2019.11.27 |
| [WebPack] 자산관리 Asset (Step3) CSS, IMG, FONT, DATA (0) | 2019.11.27 |
| [WebPack] 시작하기 (Step2) (0) | 2019.11.27 |
- Total
- Today
- Yesterday