Git Product home page Git Product logo

-study-webpack's Introduction

Webpack 스터디

# 1. Webpack 기본 설정
  1. NPM 프로젝트 생성
  2. webpack , webpack-cli 설치
  3. index.html 과 app.js 파일 생성 및 작성
  4. webpack.config.js 생성 및 설정
  5. build 명령 등록
  6. 빌드 실행

상세페이지


# 2. Webpack & Babel
  1. Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
  2. @babel/core , @babel/preset-env , babel-loader 설치
  3. webpack.config.js 에 babel 설정
  4. build 실행
  5. babel 사용 전후 비교


상세페이지


# 3. Webpack & TS
  1. Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
  2. index.html 생성 및 작성
  3. app.ts 파일 생성 및 작성
  4. typescript , ts-loader 설치
  5. tsconfig.json 생성 및 설정
  6. webpack.config.js 생성 및 설정
  7. build 실행 및 확인


상세페이지


# 4. Webpack & babel & TS
  1. Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
  2. index.html 생성 및 작성
  3. tsconfig.json 생성 및 작성
  4. app.ts 생성 및 작성
  5. 라이브러리 설치
  6. webpack.config.js 에 Babel 설정
  7. build 실행 및 확인
  8. babel & typescript 연동시, 알아야 할 점



상세페이지


# 5. Webpack & SASS
  1. Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
  2. 라이브러리 설치
  3. webpack.config.js 에 sass-loader , css-loader , style-loader 설정
  4. index.html 생성 및 작성
  5. myStyle.sass 생성 및 작성
  6. app.js 생성 및 작성
  7. build 실행 및 확인
  8. Webpack & SASS 연동시, 알아야 할 점



상세페이지


# 6. Webpack & CSS
  1. Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
  2. 라이브러리 설치
  3. webpack.config.js 에 css-loader , style-loader 설정
  4. index.html 생성 및 작성
  5. myStyle.css 생성 및 작성
  6. app.js 생성 및 작성
  7. build 실행 및 확인
  8. Webpack & CSS 연동시, 알아야 할 점


상세페이지


# 7. ESLint & Prettier
  1. app.js 생성 및 작성
  2. 라이브러리 설치
  3. ESLint 초기화
  4. .eslintrc.js 또는 .eslintrc.json 설정
  5. VSCode 설정 (settings.json) 에 저장 시 자동수정 (autoFix) 설정
  6. prettier 설정 추가
  7. .eslintrc.json 설정시, 주의사항

상세페이지


# 8. Webpack & TS & ESLint & Prettier
  1. VSCode 의 작업영역에 저장시 자동수정 기능 설정
  2. index.html 생성 및 작성
  3. app.ts 생성 및 작성
  4. webpack , webpack-cli , html-webpack-plugin , webpack-dev-server, typescript , ts-loader 설치
  5. tsconfig.js 생성 및 작성
  6. webpack.config.js 생성 및 설정
  7. eslint , @typescript-eslint/parser , @typescript-eslint/eslint-plugin 설치
  8. ESLint 초기화 실행 및 설정
  9. prettier , eslint-config-prettier , eslint-plugin-prettier 설치
  10. .eslintrc.json 에 Prettier 설정 추가
  11. Webpack & Typescript & ESLint & Prettier 연동시, 알아야 할 점



상세페이지


9-webpack-babel-ts-sass-eslint-prettier

지금까지 Webpack 관련 설정들에 대한 종합 예제 프로젝트 입니다.






상세페이지

-study-webpack's People

Contributors

chocobe avatar

Watchers

James Cloos avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.