webpack 썸네일형 리스트형 webpack 공부하기 -3 웹팩 config 만들기 npx webpack --entry ./source/index.js --output-filename index_bundle.js -o ./public 이 명령어는 웹 팩을 실행하는 명령어 입니다. 웹 팩을 실행하려면 항상 이코드를 외우거나 다른곳에 저장한 뒤 필요할 때 찾아서 사용해야하는 번거러움이 생긴다. 또한 운영하는 프로젝트가 커질 수 록 명령으로 하는게 대단히 어려워 진다. 그래서 웹 팩에게 좀 더 체계적이고 또 보기 좋게 또 재사용하기 좋게 시키기 위한 방법으로 컨피그레이션 파일을 만드는 방법입니다. 생성하기 webpack.config.js 파일을 생성한다. (자세한 정보는 webpack 공식 홈페이지로 들어가서, Guides → Getting Started 를 참고) .. 더보기 webpack 공부하기 -2 webpack의 도입 webpack을 도입했을 때 우리가 얻을 수 있는 효과는 리팩토링입니다. 구동되는 방법을 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 방법입니다. 설치 현재 디렉토리를 node.js의 프로젝트 폴더로 선언한다. npm init -y webpack을 프로젝트 폴더에 설치 npm install -D webpack webpack-cli package.json 에서 설치 확인 4. index.html안에 있는 javaScipt 코드를 별도의 index.js 파일로 뺀다. index.js라는 파일은 hello.js 파일과 world.js라는 파일을 import를 통해서 사용하고 있는것을 볼 수 있습니다. 즉, 우리가 만들고 있는 애플리케이션의 입구에 해당하는 파일은 index.js .. 더보기 webpack 공부하기 -1 웹팩을 공부하기 위해서는, 정적 페이지를 구성해보자 html 파일과 javaScript를 생성해서 기본 페이지 구성을 갖춘다. 다음과 같이 폴더경로에 파일들을 생성하고, 안에 내용을 채웠다. (와 근데, JavaScript, html로 웹사이트 만드는 거 진짜 오랜만이네 재밌네 ㅋ) 위와 같을때 생기는 문제? hellow.js에도 word 가 있고 world.js에도 word가 있어서 결국 가장 늦게 선언된 script로 덮어쓰기 되면서 word라는 단어는 ‘world’ 가 된다. 지금은 나혼자만들어서 문제를 바로 인지 할 수 있었지만, 여러 개발자들이 작업할 경우 변수의 이름이 중복될 가능성이 생길 수 있다. 그래서 규모있는 애플리케이션에서는 이름의 충돌이 너무나 심각한 문제이기 때문에 그걸 극복하기 .. 더보기 webpack 알아보기 react를 사용하면서 항상 CRA를 사용해서 Webpack이라는 용어는 낯설로 어색했다. 근데 그러면서도 이건 도대체 뭘까? (특히, eslint 다룰때 많이 궁금했음) 이제 부트캠프도 끝이 났고, 시간도 있겠다. 궁금했던 내용에 대해 공부해보려고 찾아봤다. 사전적 내용 웹팩(Webpack)은 현대적인 웹 개발에서 사용되는 정적 모듈 번들러(static module bundler)입니다. 웹팩은 프론트엔드 애플리케이션의 자원(JavaScript, CSS, 이미지 등)을 모듈로 간주하고, 이를 종속성 그래프(dependency graph)로 분석하여 하나 이상의 번들(bundle)로 묶어줍니다. 웹팩은 애플리케이션을 구성하는 모든 자원을 로드하고 의존성을 해결하여 최종 번들을 생성합니다. 이렇게 번들된 .. 더보기 이전 1 다음
