[New] Webpack Re-Study : build 마다 js, css 적용

매번 build 를 하고, 추가적으로 생성된 CSS 혹은 JS html 파일에 넣는 것은 불편하다... 그러면 어떻게 해야 할까? 아주 효과적인 모듈 html-webpack-plugin 라는 게 있다. npm install -D html-webpack-plugin webpack.config.js html-webpack-plugin 를 설치하고, plugins 에서 추가해준다. 참고로 template 은 기준이 될 html 을 의미한다.

[New] Webpack Re-Study : SASS 웹팩 이용 시, CSS 생성 관련

SCSS 파일이 여러 개 있다. 특정 js 파일에 쓰이는 SCSS 가 있다. 그럴 경우 CSS 로 빌드할 때, 어떻게 될까? 프로젝트 구조가 이렇게 된다고 가정하자. A.scss a { background: black; } B.scss a { background: blue; }

[New] Webpack Re-Study : Webpack & SASS

sass를 사용하기 위해서는 아래 라이브러리를 설치해야한다. npm install -D css-loader sass sass-loader mini-css-extract-plugin package.json { "name": "webpack_study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader":

[New] Webpack Re-Study : Using Webpack

기존에 배웠던 방식을 참조하여 Webpack 에 관련하여 추가적인 공부를 하자. 필자는 Pycharm 을 이용하여 프로젝트를 진행했다. 1. 새로운 프로젝트 생성 node.js 로 새로운 프로젝트를 생성했다. 2. webpack 설치 webpack 기능을 추가하기 위해,

9. [웹팩] npm 패키지를 나의 프로젝트에 포함시키기

npm 을 통해서 설치한 여러가지 작은 부품이 될 프로그램들을 우리의 애플리케이션으로 가져오는 방법으로써 웹팩을 사용하는 방법을 소개하겠다. npm 사이트에 lodash 라는 유명한 라이브러리가 있다. https://www.npmjs.com/package/lodash npm을 통해서 가져온 라이브러리를 우리의 프로젝트에 포함 시킬 때, 웹팩을 이용하는 방법을 살펴보자. lodash 라이브러리를 이용하자. npm install lodash

8. [웹팩] --watch 옵션

npx webpack --watch source 폴더 안의 파일이 수정했을 때 자동으로 파일을 컴파일하는 방법

7. [웹팩] 플러그인 도입

웹팩에는 2가지 형태의 확장 기능이 있다. 로더 플러그인 로더 는 우리가 가지고 있는 모듈을 최종적인 output 으로 만들어가는 과정에서 사용되는 것 플러그인은 그렇게 해서 만들어진 최종적인 결과물을 변형한다. 라고 생각하면 된다. 플러그인이 더 복합적이며 또 자유로운 일들을 많이 할 수 있다. 로더는 동작하는 형태가 딱

6. [웹팩] output 설정

이전에 로더를 통해서 다양한 형태의 타입의 파일들을 로드 해서 그것을 처리하는 방법을 살펴보았다. 이번에는 어떻게 최종적인 결과 output 을 원하는 대로 만들어 낼 것인가? 라는 것을 살펴볼 차례이다. 최종적인 파일의 이름, 파일을 하나로 합칠 것인지 혹은 여러개로 쪼갤 것인지 이런 것들을 자유롭게 할 줄 알아야 한다. 그래서 이번에는 output

5. [웹팩] 로더의 도입

이번에는 로더라는 것을 살펴보자 진짜 중요한 개념이다. 우리가 만든 애플리케이션을 보자. index.html 파일에 CSS 파일을 넣고 싶다. 그러면 최종적으로 만들어진 파일이 위치하는 public 폴더에 style.css 라는 파일을 만든다. style.css body { background-color: powderblue; color: tomato; } 이 CSS 를 동작시키기 위해 index.html 에 head 태그

4. [웹팩] 운영 모드의 도입

웹팩의 운영 모드라는 것을 살펴 보겠다. 웹팩을 실행시키면 WARNING in configuration ... 하면서 경고가 나올 것이다. npx webpack 웹팩은 굉장히 많은 설정을 가지고 있다. 그 설정을 다 기억하고 있기는 쉽지 않기 때문에 웹팩에서는 기본 값을 가지고 있다. 그 기본 값은