개발소발닭발

Webpack 설정으로 인해 어려움을 겪고 있는 사람들을 위해 이 글을 씁니다. 프런트엔드 개발에 있어 웹팩은 필수조건이 되었습니다. 많은 프런트엔드 개발자들이 웹팩을 이용하는 이유는 "빌드를 이용한 프로젝트 최적화"라고 정리할 수 있을 겁니다. 빌드라는 과정을 통해 웹팩은 정말 많은 일(정말 정말 정말!)을 할 수 있고, 당연히 그에 따른 설정도 굉장히 많습니다. 공식문서에 웹팩의 어메이징 한 기능들에 대한 설명이 아주 잘 나와 있지만 스타터에게는 이도 쉽지가 않습니다. 하지만 겁먹지 마세요. 차근차근 따라 하다 보면 그리 복잡하지 않습니다. 그리고 웹팩과 바벨의 버전이 올라가면서 설정이 더욱더 간단해졌으니깐요. 웹팩이란 무엇인가 webpack is a static module bundler for m..

// webpack.config.js { ..., resolve: { extensions: ['.jsx', '.ts', '.tsx', '.js'], alias: { '@': path.resolve(__dirname, 'src/'), '@Route': path.resolve(__dirname, 'src/route/'), '@Pages': path.resolve(__dirname, 'src/pages/'), '@Components': path.resolve(__dirname, 'src/components/'), '@Style': path.resolve(__dirname, 'public/scss/'), '@Public': path.resolve(__dirname, 'public/'), '@Config': pa..

회사에서 진행 중인 프로젝트에 쓰고 있는 웹팩 설정 파일이다. 웹팩 설정을 하기 위해 처음에는 오랜 시간이 걸렸는데, 이제는 눈 감고도 뚝딱할 정도가 되었다. 누군가에게 조금이라도 도움이 되길 바라면서 올린다. // webpack.common.js // 웹팩 설정 파일 - 공통 const path = require('path'); const webpack = require('webpack'); const I18nPlugin = require('i18n-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); con..

html에서 웹팩 변수와 정적 파일들(이미지)을 사용하고 이 녀석들까지 빌드에 포함시키자. (js, css에서 사용한 친구들처럼) 왜냐하면 html상에서 사용한 모든 에셋들도 빌드로 전부 같이 튀어나오는 것이 추후 배포 전략에서 편하기 때문이다. (현재 우리 팀에서는 카카오 파일 서버를 쓰고 있는데, html과 js, css에서 바라보는 환경을 통일시킬 필요가 있었다.) 1. 설정에서 플러그인을 추가해준다. plugins: [ new HtmlWebpackPlugin({ // 기본 확장 템플릿 template: './src/index.html', // 외부 호스팅 파일 originPath: ASSET_PATH, }), ], 2. html에서 사용한다. 실행해보면 첫 번째 파비콘 파일은 빌드 타임에 다른 파..

1. 웹팩 설정에서 변수를 설정해준다. ..., { loader: 'sass-loader', options: { prependData: '$imagePath: "https://t1.daumcdn.net/liveboard/kidsnote/";', }, } 2. scss에서 사용한다. background: url(#{$imagePath}/예쁜내얼굴.png) no-repeat left bottom;