본문 바로가기

웹팩

(3)
Bundle json files with Webpack 웹팩에서 파일을 다루게 되어 module 옵션에 아래와 같이 url-loader을 사용하였다. 참고: url-loader는 파일을 base64 URL로 변환하는 처리를 한다. 즉, 파일을 옮기는 작업이 아니라 변환해서 output directory에 저장하는 역할을 한다. module.exports = [{ mode: 'production', context: __dirname, entry: { app: './src/js/milsymbol/index.js', }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, resolve: { mainFields: ['module', 'main'] }, module: { rules: [..
Webpack option - Devtool 이 옵션은 소스 맵이 생성되는지 여부와 생성 방법을 제어한다. 소스 맵이 뭐지? 소스 맵은 원본 소스와 난독화된 소스를 맵핑해주는 방법 중 하나이다. *.map 파일을 통해 제공되고, json 형태로 되어있다. 난독화된 파일을 통해서는 어떤 부분에서 오류가 났는지 알기 힘들다. 소스 맵을 통하면 원본 파일의 어떠한 부분에서 오류가 났는지 볼 수 있다. 디버깅 또한 가능하다. 배포용은 수정하면서 작업하는게 아니기 때문에 빌드 시간, 로그, 디버깅보다 용량이 중요하다. 개발용은 수정이 빈번하고 디버깅을 해야하기 때문에 용량보다는 빌드 시간, 로그, 디버깅이 중요하다. 상황에 맞춰서 devtool을 선택하면 될 것같다. https://webpack.js.org/configuration/devtool/#devt..
Webpack Caching 전략 캐싱은 빌드 시간을 단축하는 웹팩의 유용한 기능이다. 웹팩으로 빌드한 결과물이 변경되지 않았으면 계속 캐싱 상태로 남겨서, 별도의 HTTP 요청이 발생하지 않도록 하는 기법이다. Cache configuration type으로 filesystem 유형은 파일 시스템 캐시를 활성화 활성화 함으로써 이전 빌드한 내용과 비교해서 필요없는 단계를 스킵할 수 있다. 빌드는 기본적으로 node_modules/.cache/webpack에 캐시된다. module.exports = { //.... //webpack5 - persistent file system caching cache: { type: 'filesystem', }, //... } 참고: https://javascript.plainenglish.io/how..