짧은코딩

웹팩 데브 서버가 필요한 이유 그냥 웹팩을 사용하고 코드 수정을 하면 다시 빌드 명령어를 입력하고 실행해야 바뀐 내용이 반영된다. 하지만 웹팩 데브 서버를 사용하면 코드 변경 시 자동으로 빌드하고 새로고침이 된다. 웹팩 데브 서버의 특징 웹팩 데브 서버를 사용해서 빌드를 하면 결과물이 파일 탐색기나 폴더에 보이지 않는다. 즉, 기존에 생기던 dist 폴더가 생기지 않는다. 이는 메모리에 빌드 결과를 저장하기 때문이다. 개발자 도구의 network 탭에 가면 메모리에 저장되어 있는 bundle.js가 보인다. 파일 입출력보다 메모리 입출력이 더 빠르고 자원이 덜 사용되어 효율적이다. package.json "scripts": { "test": "echo \"Error: no test specified\" ..

Loader module.exports = { module: { rules: [] } } 로더는 웹팩이 js가 아닌 HTML, CSS, Images, 폰트 같은 자원을 변환할 수 있도록 도와주는 속성이다. 로더는 module로 사용된다. module을 주석 처리한 경우 module을 주석 처리하고 빌드를 하면 사진 처럼 오류가 난다. js 파일 안에 css가 들어갈 수 없어서 로더를 설정하라는 메시지이다. 예시 module.exports = { module: { rules: [ { // 모든 css 확장자를 가진 파일에 use에 있는 loader를 적용하겠다라는 의미 test: /\.css$/, use: ["style-loader", "css-loader"], }, // 모든 js 파일에 대해 babel..

Entry module.exports = { entry: "./index.js", }; entry는 웹팩에서 웹 자원을 변환시키기 위한 최초의 js 파일 경로이다. 디펜던시 그래프(Dependency Graph) 빌드를 하면 이 사진처럼 모듈 간의 의존 관계가 생기는 구조인 디펜던시 그래프가 생긴다. Entry 포인트가 2개인 경우 entry: { login: './src/LoginView.js', main: './src/MainView.js' } entry 포인트는 2개가 될 수 있다. entry 포인트 2개 이상 쓰는 경우는 싱글 페이지 애플리케이션(SPA)보다 서버에서 정보를 내려주는 형태의 멀티 페이지 애플리케이션이 적합하다. Output module.exports = { output: { fil..

코드 사이트 https://joshua1988.github.io/webpack-guide/getting-started.html#%EC%9B%B9%ED%8C%A9-%EB%A7%9B%EB%B3%B4%EA%B8%B0-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC 웹팩 맛보기 | 웹팩 핸드북 웹팩 맛보기 튜토리얼 그럼 이제 웹팩을 가볍게 맛볼수 있는 튜토리얼을 진행해보겠습니다. 이번 튜토리얼로 웹팩을 실행할 수 있는 개발 환경을 구성하고 빌드 과정을 경험해볼 수 있을 것입 joshua1988.github.io 이 사이트의 코드를 예제로 사용했다. 동작의 원리 package.json 및 dist webpack을 설치하고나서 package.json에 "scripts": { "test": "ech..

webpack(웹팩) 웹팩은 프론트엔드 프레임워크에서 사용하는 모듈 번들러(Module Bundler)이다. 모듈 번들러는 HTML, CSS, JS 등의 파일을 각각 모듈로 보고 모든 모듈을 조합해서 하나로 만드는 도구를 의미한다. 모듈 function sum(a, b) { return a + b; } export { sum } 모듈은 위 코드처럼 기능을 갖는 작은 단위의 코드이다. 웹팩에서는 HTML, CSS, JS, 이미지, 폰트 등이 각각 모듈이다. 모듈 번들링 모듈 번들링은 여러 자원들을 하나의 파일로 병합 및 압축해주는 동작을 의미한다. (빌드, 번들링, 변환은 모두 같은 의미이다.) -참고 페이지 https://joshua1988.github.io/webpack-guide/webpack/wha..

npm 설치 --save-prod npm i jquery --save-prod 우리는 보통 "--save-prod"는 생략하고 npm을 설치한다. 생략을 하고 설치해도 자동으로 "--save-prod"가 붙기 때문에 생략해도 된다. 이렇게 설치한 라이브러리, 패키지는 package.json의 "dependencies"에 저장이된다. --save-dev(-D) npm install jquery --save-dev npm i jquery -D 개발을 하다보면 가끔 "--save-dev"나 "-D"를 붙여서 설치하는 경우가 있었다. 하지만 이것이 어떠한 역할을 하는지는 잘 몰랐다. 우선 위에 있는 코드는 모두 같은 코드이다. "--save-dev" 대신 "-D"를 써도 되는 것이다. 이렇게 설치한 라이브러리,..