목록webpack (2)

Minwook’s portfolio

webpack SASS/SCSS @debug 활성화 방법

웹팩으로 프로젝트를 만드는중에 SASS @debug 콘솔이 터미널에 찍히지 않는 문제가 있었다. 해결방법 //webpack.config.js에 옵션추가 stats: { loggingDebug: ["sass-loader"], }, 이후 webpack sever 터미널에 @debug가 찍히는것을 확인 할 수 있다. DEBUG LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./index.scss [debug:12:4..
Troubleshooting 2023. 3. 7. 18:44
webpack ts, sass, img loader 설정

필요한 패키지 npm i css-loader sass sass-loader style-loader file-loader url-loader ts-loader typescript 이미지는 url loader와 file loader를 사용한다. url loader, 파일을 base64로 인코딩하여 번들링파일에 포함된다. file loader, 파일을 output 경로로 복사해준다. 용량이 적은 파일은 url loader를 사용하고 용량이 큰 파일은 fallback으로 file loader를 사용하는게 좋다. tsconfig.json 설정 { "compilerOptions": { ...생략 "typeRoots": ["node_modules/@types", "types"] //타입폴더위치 "outDir": "...
Today I Learned 2023. 3. 6. 16:10
이전 Prev 1 Next 다음