g-study

WebPack 주요 속성 4가지 Entry : Build를 하고자하는 대상 파일output : Build를 하고나서 나오는 결과물 파일loader : output되는 JS파일안에 웹자원(CSS, font, img, html) 파일들을 Webpack가능하도록 도와줌plugin : Webpack결과에 대한 기본적인 동작에서 추가적인 기능을 제공하는 속성Build = 변환 = 번들링 = 컴파일Entryentry 속성은 Webpack에서 웹자원을 변환하기 위해 필요한 최초 진입 JS 파일경로입니다.module.exports = { entry: './js/app.js' } Outputoutput 속성은 Webpack을 돌리고난 후 결과물 파일입니다.path? 파일 경로filename? 피일명module.expor..

1. You may need an appropriate loader to handle this file type 오류 배경 : Webpack한다무엇을 : bundle.js 파일안에 CSS 파일을결과 : loader을 선언해주지 않았기에 다음과 같은 오류가 남 You may need an appropriate loader to handle this file type 해결 : loader에 css파일인 경우 style-Loader, css-Loader을 추가해준다 module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] },

$ npm run build 입력 시 아래와 같은 오류 발생 원인 : package.json 파일 > scripts에 build명령어가 없는데 실행하려고 했음 npm ERR! missing script: buildnpm ERR! A complete log of this run can be found in: ----------------------- 해결: package.json 파일에 "build" : "webpack" 넣으면 됨 "build": "webpack" 넣고npm run build 하니 잘 돌아가는 것을 확인!

ES6 Modules 문법모듈화 기능의 기몬 문법 import, exportexport내보낼 변수와 함수를 선언export 변수, 함수 importexport된 사용하고자하는 변수 혹은 함수들을 정의import { 불러올 변수 또는 함수 이름 } from '파일경로' 기본예제1//math.js export var pi = 3.14; // app.js import { pi } from './math.js' console.log(pi); //3.14 기본예제2//math.js export var pi = 3.14; export function sum(a, b){ return a + b; } // app.js import { sum } from './math.js'; sum(10, 20); // 30 실습예제..

WebPack여러개의 JS를 하나의 파일로 묶어내는 모듈 번들러이다.주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다.웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다.모듈, 모듈링1. 모듈이란?HTML, CSS, 심지어는 이미지같은 모든 요소들 하나하나가 모듈이다. 2. 모듈번들링?웹서비스를 구성하는 파일들(css, js, sass 등)간의 연관된 관계를 하나로 합쳐주는 것 WebPack 적용하기index.js 파일에서 'lodash'를 사용하여 webpack 만들기index.js + lodash.js 모듈 번들러 히여 Network의 속도를 빠르게 해줌1. 환경설..