메로그

웹팩 개발서버 개발환경과 운영환경을 맞춤으로써 배포시 잠재적 문제를 미리 확인할 수 있다. 프론트엔드 개발환경에서 이러한 개발용 서버를 제공해주는 것이 Webpack-dev-server 이다. npm install Webpack-dev-serverpackage.json { "scripts": { "start": "webpack-dev-server --progress" } }--progress 를 추가하면 빌드 진행률을 보여준다. 기본 설정 웹팩 설정 파일의 devServer 객체에 개발 서버 옵션을 설정할 수 있다. webpack.config.js module.exports = { devServer: { // 아웃풋 contentBase: path.join(__dirname, "dist"), // 브라우..

린트란? 코드의 오류, 버그, 스타일 등 코드 규격을 점검하는 것을 린트라고 부릅니다. 린트를 사용하면 코드의 가독성을 높일 수 있고, 스크립트의 런타임 에러를 예방할 수 있습니다. (미리 오류를 뱉어주기 때문에) ESLint ECMAScript 를 검사하는 도구 중 하나이다. ESLint 를 사용해서 코드의 포멧팅, 품질 을 검사할 수 있다. 혼자 개발하는 경우에는 자기만의 스타일대로 하기 때문에 큰 문제점은 생기지 않을 수 있지만, 여러 사람이 개발하는 경우에는 코드의 스타일을 가지고 있는 것이 좋다. 이를 이용하여 스타일, 잠재정 버그를 예방할 수 있다. npm install eslint // .eslintrc.js 만들기 npx eslint --init rules 를 이용하여 여러 규칙을 추가할 ..

크로스 브라우징 브라우저마다 사용하는 언어 스펙이 달라 코드를 읽지 못하는 경우가 발생한다. 자바스크립트의 경우, IE 에서 프라미스를 이해하지 못하는데 이를 해결해줄 수 있는 것이 바벨이다. es6 이상의 언어로 작성된 코드를 바벨을 이용한 트랜스파일링 작업을 하여 모든 브라우저에서 호환가능하도록 한다. 바벨 설치 npm install @babel/core @babel/cli // 실행 npx babel app.js 프리셋 바벨에는 여러가지 플러그인이 있는데, block-scoping, arrow-functions 등등 이 있다. 이러한 것들을 하나씩 다운받기는 우리는 너무 너무 귀찮다. 그러니까 이러한 플러그인이 모아져 있는 프리셋을 사용하자 ^.^~~ preset-env 는 es6 를 변환할 때 사..

플러그인 이란? 로더가 파일 단위로 처리한다면, 플러그인은 번들된 결과물을 난독화, 특정 텍스트를 추출하는 용도 등으로 사용하도록 합니다. 간단하게 커스텀 플러그인을 만들어 보자. my-webpack-plugin.js /* 로더와 달리 플러그인은 클래스로 되어 있고 apply 함수를 구현하여 인자로 받는 compiler 객체 안에 있는 tap() 함수를 사용하여 작업이 완료된 시점에 로드를 찍는 코드를 작성해보자. */ class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap("My Plugin", stats => { console.log("MyPlugin: done") }) } } /* compiler.plugin() 함수의 두번째 인자인 콜..

로더 웹팩은 모든 파일(html, js, css ...)을 모듈로 하여 바라보고 있습니다. 그러하여 import 구문을 사용하여 자바스크립트 코드 안으로 가져올 수 있는데 이게 가능한 이유가 웹팩의 로더 덕분입니다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환, 이미지를 dataUrl 형식의 문자열로 변환, CSS 를 자바스크립트에서 직접 로드할 수 있도록 합니다. 커스텀 로더 만들기 임의의 js 파일을 하나 만들어봅시다. userLoader.js module.exports = function userLoader (c) { return c; } 로더가 읽은 파일의 내용이 함수 인자 c 로 전달됨. webpack.config.js module: { rules: [{ test: /\.js..

웹팩이란? 모듈을 지원하기 시작한 것은 es2015(es6) 이상 입니다. 그 전에는 그럼 어떻게 했냐? 우리가 알고 있듯이 script 를 하나씩 로드해서 사용하였습니다. 또는 위와 같은 문제를 개선하여 즉시 실행 함수 (IIFE) 방식을 사용하였습니다. 그러면서 다양한 모듈 스펙 (AMD, CommonJS, UMD) 등이 나오기 시작하였습니다. 웹팩은 여러 개 파일을 하나의 파일로 합쳐주는 번들러 입니다. 시작점인 엔트리를 기준으로 의존되어 있는 모듈을 찾아 하나의 결과물로 합쳐서 만들어줍니다. 웹팩 설치 // 앞에 @ 를 붙여 원하는 버전을 설치할 수 있음. 나는 4버전을 설치하겠음 npm install webpack@4 npm install webpack webpack-cli 설치가 완료되면 아래..