Ellen's Web Note

번들링 후 번들 파일이 생성되기 직전에 후처리를 하는 기능 번들파일 하나에 대해서 동작하고, 번들된 자바스크립트를 난독화 하거나 특정 텍스트를 추출하는 용도로 사용한다. //my-webpack-plugin.js class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap("My Plugin", (stats) => { //plugin이 완료됬을 때 동작하는 callback 함수 console.log("MyPlugin: done"); }); //번들 파일 후처리 //webpack 내장 플러그인 BannerPlugin compiler.plugin("emit", (compilation, callback) => { //번들된 main.js 파일의 소스를 가..

javascript, css, image, font등을 javscript코드로 가져와서 사용할 수 있게 함. 대표적 Loader 4가지 css-loader css파일을 자바 스크립트 모듈처럼 사용할 수 있도록 지원 (import './style.css') style-loader 자바스크립트 문자열 스타일 코드를 html에 주입시켜 브라우저에 스타일이 적용되도록 지원 //webpack.config.js { ... module : { rules:[ ..., { test: /\.css$/, use: ["style-loader", "css-loader"], }, ..., ] } } .css파일이 있으면 style-loader와 css-loader를 실행 file-loader 이미지 파일을 모듈러 사용할 수 있도..

모듈을 사용하게 되면 아래의 왼쪽과 같은 모듈간 의존 관계가 발생함. 모듈관계의 시작점을 통해 관계된 모든 모듈들을 ./dist/main.js 번들링 파일로 만듬. package 설치 > npm install -D webpack webpack-cli webpack : bundle 작업 실행(모듈로 연결된 스크립트 파일을 하나로 합침(이미지 왼쪽)) webpack-cli : webpack을 터미널 명령으로 사용할 수 있게 함. 실행파일(bundle file) 선언 ... ... webpack option --mode : "development" 개발환경의 정보를 추가, "Production" 운영에 배포하기 위한 최적화 설정 --entry : 모듈의 시작점 지정 --output : 웹팩의 모든 모듈을 합치..

리액트 프로젝트 만들기 yarn create react-app 'project_name' npm create-react-app 'project_name' 디렉터리 구조 node_modules - Node.js 기본 도구 모음 - npm, yarn으로 설치한 패키지 파일 모음. public - 실제 화면에 보여지는 파일 - Index.html : 화면에 출력되는 HTML : jsx에서 리턴한 가상 DOM을 에 추가해서 실행. - manifest.json : 앱의 홈화면에 보여지는 아이콘, 이름 등을 설정 - Robots.txt : 사이트맵 설정 src - React를 구현할 폴더 - Index.js : 프로젝트 실행 시 제일 처음 접근하는 파일. 경로(route) 설정 - App.js : 프로젝트 실행 시..