Programming/Webpack
-
webpack 자주 사용하는 플러그인Programming/Webpack 2020. 5. 6. 21:05
BannerPlugin 웹팩에서 제공하는 플러그인으로 결과물에 빌드 정보나 커밋 버전, 만든이 등과 같은 정보를 추가할 수 있다. webpack.ocnfig.js plugins: [ new webpack.BannerPlugin({ banner: `build time : ${new Date().toLocaleTimeString()}`, }), DefinePlugin 웹팩에서 제공하는 플러그인으로 모든 자바스크립트 코드에서 접근이 가능한 전역 변수를 선언하기 위해 사용된다. 기본적으로 DefinePlugin을 빈 객체를 전달하여도 노드 환경정보인 process.env.NODE_ENV에 값을 넣어준다. console.log(process.env.NODE_ENV) 했을 경우 해당 webpack.config.js..
-
webpack 기초 입문 ( entry, output )Programming/Webpack 2020. 4. 20. 17:08
webpack ? webpack은 Node.js 환경에서 실행되고 npm으로 설치할 수 있다. 웹팩은 자바스크립트, HTML, CSS, 이미지와 같은 여러개의 assets (js, css,png,jpg 등)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러로 의존성이 있는 모듈을 취하여 해당모듈을 대표하는 정적 자산들을 생성한다. 정적 자산들이란 말 그대로 움직임이 없이 고정된 자산들을 말하며 webpack은 예를들어 여러가지의 모듈을 main.js 에 통합 해준다. webpack 실습 전 디렉터리 구조 // bye.js function webpackTest2() { console.log('bye webpack!'); } webpackTest2(); // hi.js f..