삼손스

따로 분리하여 bundle한 css파일과 js파일을 각각 html 파일에 link 태그와 script태그로 추가해줘야 합니다. HtmlWebpackPlugin플러그인은 이것을 자동화해줍니다. npm install --save-dev html-webpack-plugin const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = { plugins: [ new HtmlWebpackPlugin({ template: './index.html' }) ] } 또는 const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWe..

프론트앤드에서는 /src, /dist, /build 동일한 내용들이 JavaScript 모듈에 사용되었지만 webpack과 같은 도구는 모든 종속성 을 동적 번들로 묶습니다. 또한 웹팩은 자바 스크립트 로더가 있는 다른 유형의 파일도 포함할 수 있습니다. 그냥.. 부가적인 파일(이미지 등등)들은 하나로 다 묶는다고 쉽게 생각하면됨 dist / index.html - + webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { - filename: 'main.js', + filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }..

디렉토리 구조를 변경 및 추가하여, 소스코드와 배포코드로 분리합니다 소스코드 /src 배포코드 /dist 소스코드는 작성하고 편집할 코드들 배포코드는 빌드 하면 생기는 놈들 webpack-demo |- package.json + |- /dist + |- index.html - |- index.html |- /src |- index.js lodash의존성을 번들로 묶으려면 index.js라이브러리를 로컬로 설치해야합니다. npm install --save lodash 더보기 자바스크립트 유틸리티 라이브러리 lodash array, collection, date, number, object등을 다룰 수 있는 라이브러리 배열 안의 객체들의 값을 핸들링할때 유용 자주 사용되는 기능 filter - 배열 안에 요..

프론트앤드 백앤드 웹개발을 시작해보려합니다 어렵게 설명하는건 이해하기 어려워서 직접 공부하면서 내 식대로 이해한걸 편하게 적으려고합니다. 내가 이해한 내용이 틀릴 수 있지만 문서공유를 한다는것에 의미를 둡니다. 우선 웹팩이 무엇일까? 웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러로 HTML, CSS, img 등 프론트엔트 자산들을 하나로 변환할 수 있다. 라고 정의되있는데 왜 쓰는지 되게 단순하게 생각하면될거같다. USB에 1GB파일 한개를 옮기는 것 vs 여러개로 분할됐지만 총 합 1GB파일 한개를 옮기는 것 1GB파일 한개를 옮기는게 훨 빠르고 눈에 쉽게 들어온다. 그런의미로 생각하면 될 것 같다. 툴은 visual studio code 선택. 이유는 없고 그냥 대세라고 하길래 받았다. ..