webpack
-
[webpack] resolve alias 절대경로 설정 ( javascript / typescript )frontend/bundler 2022. 3. 28. 16:34
오늘은 webpack의 절대경로 설정에 대해서 알아보겠습니다. 절대경로 설정이 자바스크립트와 타입스크립트가 조금 다르게 설정 해야됩니다. 타입스크립트에서 설정할게 더 있다고 볼 수 있습니다. 간단한 설명과 함께 진행해보겠습니다. 자바스크립트 우리는 절대경로를 사용하기 위하여 webpack의 resolve옵션을 사용하게 될 것입니다. resolve는 모듈해석에 대한 설정으로 특정 모듈을 호출할 때 모듈을 찾는 위치를 변경할 수 있습니다. //webpack.config.js module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "./src/"), }, } }; 위와 같이 한다면 src를 기점으로 모듈을 찾고 모듈을 찾을때는 아래와 같이 찾습..
-
Webpack : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 오류frontend/오답노트 2022. 3. 25. 16:08
문제 : Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: document is not defined Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: document is not defined 이런 관련한 문제가 발견된다면 해결방법은 아래와 같습니다. 해당 문제는 webpack의 빌드과정에서 loader의 충돌이 발생해서 생기는 문제입니다. 저는 최적화를 위해 넣어둔 mini-css-extract-plugin과 style-loader의 충돌로 발생하..