복습/Webpack 썸네일형 리스트형 [Webpack] 웹팩 튜토리얼 README 📖 웹팩 튜토리얼 웹팩 튜토리얼을 작성합니다. 처음에 웹팩을 처음 접했을 때 어려웠던 부분들을 하나씩 체크해보며 개념들을 짚고 넘어갑니다. 이 저장소는 보일러플레이트로 이용할 수 있습니다. :) 🚀 목표 가볍게 웹팩설정을 하며 웹팩의 주요 개념을 알아보고 빌드와 개발서버까지 설정하는 방법을 익히는것을 목표로 합니다. 추가적으로 ES6 이상의 문법들을 ES5로 변환하여 작동이 정상적으로 되는지 확인해봅니다. 📝 목차 웹팩에 관하여 웹팩이란? 웹팩의 4가지 주요개념 웹팩 설정하기 1단계 : 프로젝트 초기화 2단계 : 필요한 모듈들 설치하기 3단계 : 웹팩 설정파일 작성하기 빌드해보기 개발서버 열어보기 웹팩에 관하여 웹팩이란 무엇인지 알아보고 웹팩의 4가지 주요개념들을 알아봅니다. 웹팩이란? 웹팩.. [Webpack] 알아두면 쓸데있는 웹팩지식 CHECK 헷갈림 정리 헷갈릴 수 있는 개념들을 정리해 놓은 글 entry는 Array? Object? Loaders 와 Plugin의 차이 query 와 options 뭘 써야하지? loaders 와 rules 중 뭘 써야하지? use 를 써야하나 loader를 써야하나? __dirname 과 . 의 차이가 무엇인가? Development(개발모드) 와 Production(배포모드) entry는 Array? Object? entry 프로퍼티에는 Array 를 써야하나요 Object를 써야하나요? Array 를 쓰는 경우 서로 의존성 없는 여러파일을 사용한다면 Array형식으로 사용한다 module.exports = { entry: ['./js/index.js', './js/foo.js'], output.. [Webpack] css-loader & style-loader css-loader_style-loader css-loader webpack에서 .css 파일을 읽어들이기위해 사용하는 로더 설치 $ npm install --save-dev css-loaderstyle-loader 태그를 삽입하여 CSS에 DOM을 추가 설치 $ npm install --save-dev style-loader사용법 style-loader 와 css-loader 를 결합해서 쓰는것이 보통이다 번들링할 .js 파일의 상단에 css 파일을 import import '/* 경로 */' webpack.config.js 파일에서 설정 module.exports = { module: { rules: [ {...}, // 생략 { test: /\.css$/, use: ['style-loader', '.. [Webpack] extract-text-webpack-plugin extract-text-webpack-plugin extract-text-webpack-plugin 이 플러그인은 텍스트를 파일로 추출하는 플러그인이다 설치 $ npm install --save-dev extract-text-webpack-plugin사용법 css파일을 별도로 뽑아보겠다 // webpack.config.jsconst ExtractTextPlugin = require('extract-text-webpack-plugin'); webpack.config.js 파일의 가장 상단에 require 해줌 // webpack.config.jsconst ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module.. [Webpack] Babel babel Babel Babel 은 es6/es7 으로 작성된 코드를 es5 코드로 transpiling 하기 위한 도구이며 transpiler 이다. 작은 모듈들로 구성되어있으며, Babel은 다양한 모듈을 담는 일종의 상자역할을 함 왜 쓰는가 ? 아직까지 최신 문법을 지원하지 않는 브라우저가 있기에 호환을 위해 씀 babel-loader webpack이 모듈을 번들링할 때 바벨을 사용하기 위한 로더 $ npm install --save-dev babel-loaderbabel-preset-env babel-preset-env 모듈은 설정된 환경에 적합한 플러그인을 자동으로 설정해줌 $ npm install --save-dev babel-preset-envquery: { presets: ["env"]}/.. [Webpack] Webpack 웹팩이란? webpack Webpack Webpack 은 Module Bundler 이다. Module ? 모듈은 구현 세부사항을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드조각이다. Bundler ? Bundle : 소프트웨어 및 일부 하드웨어와 함께 작동하는데 필요한 모든것을 포함하는 패키지. Bundler 란 필요한 의존성에 대해 정확히 추적해 해당하는 의존성들을 그룹핑 해주는 도구이다. 모듈번들러는 빌드타임에 실행되며 번들파일을 생성한다 (예: bundle.js) 생성된 번들파일을 브라우저에서 로드한다. 웹팩(Webpack) 의 장점 모듈 번들러의 기능을 커스터마이징해서 사용 가능 third-party library에 대해 모듈로 통합하는 기능 제공 we.. 이전 1 다음