webpack

SASS 기존 웹페이지에 스타일을 적용하기 위해서는 CSS로 하나하나 변경해주어야 하는 번거로움이 있다. 이 같은 CSS의 개발 편의성을 높이기 위해 등장한 SASS, 프리프로세서 스크립트 언어이다. CSS의 경우 HTML환경에 style 태그만 지정해주면 바로 로드가 되는데 이 SASS란 녀석은 그렇지가 않다. 사용하기 전에 CSS로 컴파일하는 과정이 필수다. 그래서 보통 웹팩과 함께 사용된다. 1. 필요 라이브러리 설치 npm i webpack webpack-cli sass sass-loader style-loader mini-css-extract-plugin css-loader 설치를 완료해주면 웹팩 설정파일을 만들어준다. 2. webpack.config.js import MiniCssExtract..

ERROR in ./frontend/public/js/handle.js 10:0-31 export 'default' (reexported as 'Feeds') was not found in './feeds.js' (possible exports: Feeds) webpack 5.72.0 compiled with 1 error in 112 ms 웹팩에서 클래스를 임포트 할 때 위와 같은 에러가 뜰 수 있습니다. 이때 임포트 할 클래스를 export default class로 설정해주시면 에러가 해결됩니다. ❌ 에러 코드 export class Feeds { constructor(token) { this.token = token } ... } 👍 수정 코드 export default class Feeds { ..

⚙️ 기본 설정 다음과 같은 환경을 사용해서 개발합니다. Es6 문법 webpack5 nodejs v17.5.0 🚀 프로젝트 세팅 웹팩 5와 javascript-obfuscator 모듈을 활용하겠습니다. 먼저 npm 모듈을 설치합니다. npm install --save-dev webpack-cli javascript-obfuscator webpack-obfuscator package.json 에서 번들링 구문을 설정해줍니다. { ... "scripts": { "start": "node app.js", "bundle:development": "webpack --mode=development", "bundle:production": "webpack --mode=production" }, ... } 🔌 Web..