삼손스

웹팩으로 빌드한 결과물이 변경되지 않았으면 계속 캐싱 상태로 남겨서, 별도의 HTTP 요청이 발생하지 않도록 하는 기법에 대해서 정리. [contenthash]는 변경된 내용이 있을경우 해쉬코드로 알아서 변경되니, 사용자는 새로운 버전을 항상 받을 수 밖에 없음 캐쉬 지울필요도 없고 개꿀 webpack.config.js const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', plugins: [ // new Clea..

서버가 시작된 상태에서 상태값이 변경되었을 시 확인할 수 있음. 서버를 껏다 켰다 하지 않아도 됨 webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', - print: './src/print.js', }, devtool: 'inline-source-map', devServer: { contentBase: './dist', + hot: true, }, plugins: [..

코드를 나누어서 빌드할 수 있다. webpack-demo |- package.json |- webpack.config.js |- /dist |- /src |- index.js + |- another-module.js |- /node_modules another-module.js import _ from 'lodash'; console.log( _.join(['Another', 'module', 'loaded!'], ' ') ); webpack.config.js const path = require('path'); module.exports = { mode: 'development', entry: { index: './src/index.js', + another: './src/another-module.j..

ebpack-dev-server간단한 웹 서버와 라이브 다시로드를 사용할 수있는 기능을 제공합니다. 설정해 봅시다 : webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', entry: { app: './src/index.js', print: './src/print.js', }, devtool: 'inline-source-map', + devServer: { + contentBase: '...

따로 분리하여 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 선택. 이유는 없고 그냥 대세라고 하길래 받았다. ..