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. 환경설..

Live Server 플러그인 Chrome 브라우저로 설정 1. Ctrl +, 을 눌러서 셋팅창으로 이동 2. Extensions > Edit in settings.json 버튼 클릭 3. "liveServer.settings.CustomBrowser": "chrome", 추가 4. VS Code 껏다가 키면 됨 5. Open In Default Browser

NPM(Node Package Manager)NPM 명령어1. NPM 지역 설치명령어와 제거 명령어가. 지역설치--save-prod는 생략되어 있다.install 대신 i로 사용 가능#npm install 라이브러리명 --save-prod #dependencies npm i 라이브러리명 #npm install 라이브러리명 --save--dev #devDependencies npm i 라이브러리명 -D dependenciesdevDependencies명령어npm i 라이브러리명npm i 라이브러리명 -D용도배포용개발용차이화면 Dom 조작과 직접적인 연관EXjquery, react, angular, vue, chartwebpack, sass, js-comparession빌드 여부npm run build로 빌..

NPM 설치 명령어Package.json 기본값으로 생성npm init -ynpm 라이브러리 설치 명령어npm install 라이브러리npm install jQuery 그림과 같이 node_modules폴더와 함께 jQuery 라이브러리가 설치됨 2.package.json 에 dependencies 가 추가됨 참고인프런 강의 주소 https://www.inflearn.com/course/프런트엔드-웹팩/dashboard수업 교안 사이트 https://joshua1988.github.io/webpack-guide/guide.html