webpack 개발 예제

[dlgustn555]

1. webpack-ex 작업 디렉토리 생성 및 scaffolding

   • package.json 생성 : npm init -y

2. webpack 설정 파일 생성 및 entry, output 설정

3. webpack, webpack-cli 라이브러리 추가

   npm install -D webpack webpack-cli

4. webpack-dev-server 추가 및 셋팅

   npm install -D webpack-dev-server

5. mustace.js rxjs 라이브러리 추가

   npm install mustache rxjs

6. webpack에 css 로더 추가 및 css 별도 파일로 생성

   npm install -D style-loader css-loader
   npm install -D extract-text-webpack-plugin@next

7. index.html 파일을 자동 생성 (빌드된 파일을 자동으로 include 해줌)

   npm install -D html-webpack-plugin

8. babel 설정

   npm install -D @babel/cli @babel/core @babel/preset-env babel-loader

9. babel-polyfill추가

   npm install @babel/polyfill

10. sass 로더추가

    npm install -D sass-loader node-sass

11. file 로더 추가

    npm install -D file-loader

[dlgustn555]

웹팩 강좌 :

• http://webframeworks.kr/tutorials/translate/webpack-the-confusing-parts/
• https://ibrahimovic.tistory.com/42