본문 바로가기

프론트엔드 공부/webpack&bundler

 (6)
webpack 플러그인설치 npm i -D html -webpack-plugin으로 설치후 webpack.config.js에 require로 불러오기, plugins 구성옵션 만들기, npm run dev 시 로컬 포트가 부정확하게 나오므로 로컬포트 관련 구성옵션도 추가할것 //entry로 시작하여 js/main.js를 읽어들여서 //output으로 만들어내는데 그 옵션인 plugins로 경로를 index.html로 지정
webpack설치와 webpack.config.js npm init -y(package.json) 1.npm i -D webpack webpack-cli webpack-dev-server@next 으로 패키지 다운 2.package.json scripts 수정 webpack dev server로 개발서버 오픈하려면 폴더내에 webpack.config.js 함께 구성해야한다.(웹팩 구성옵션저장) 3.webpack.config.js는 브라우저x nodejs 환경에서 동작 해당 코드 작성 후 npm run build로 폴더네 파일 만들수 있다. *nodejs환경에서 적용되므로 import 대신 require와 module.exports 사용 entry는 파일을 읽어들이는 진입점, output은 결과물을 반환 __dirname은 nodejs에서 제공하는 전역모듈..
PARCEL babel npm 설치 및 추가플러그인 설치 바벨(컴파일러) : 최신 es6,7,8 문법 자바스크립트 코드를 es5로 코드 변환 (컴파일) 설치하기 폴더내에 .bablerc.js 생성후 다음과 같이작성(하단파일명은오타) autoprefixer 옵션등록과 동일하게 package.json에 해당옵션이 있다면 입력하지 않아도 ok 임의로 비동기식 async 문법을 main.js 파일에 적용 설치된 babel에서는 async를 지원하지않음 그래서 하단 플러그인 따로 설치 후 , .bablerc.js 파일에 plugin을 패키지 이름을 따로명시 하고 터미널에서 npm run dev 하면 개발자도구에서 화면과 같이 잘 출력된다.
PARCEL autoprefixer설치(벤더프리픽서) 벤더프리픽서: 공급업체 접두사 npm init -y로 pakage.json 설치 터미널창에서 npm i -D post css autoprefixer 설치후 package.json에서 browserslist 추가 (해당내용: 1%이하 의 마지막 2개 버전까지) 폴더내에 .postcssre.js 폴더 만들어줌.(번들러 변환 용도이기 때문에 common js(nodejs) 방법으로 작성 require(가져올파일) module.exports(내보낼파일) 코드간소화 npm dev run 하면 이런 경고창이 뜬다 ( postcss autofixer가 postcss 8버전이필요하다는 내용) package.json의 설치파일을 보면 postcss와 autoprefixer의 버전 차이때문이 원인으로 보인다 (자주있는문제..
PARCEL bundler(정적파일연결)pacel-plugin-static-files-copy 패키지 사용하기 생성된 이미지파일 등은 직접 dist 폴더에 넣지 않고 pacel-plugin-static-files-copy 를 npm으로 설치해줘야한다 설치후 package.json 에서 하단처럼 정적경로 폴더를 지정해줘야한다.(링크참조) 이패키지 옵션을 통해 favicon.ico처럼 따로 복사해서 사용할 파일들을 지정할수 있다. "staticFiles":{ "staticPath":'static'} //pacel-plugin-static-files-copy 패키지를 통해 static이라는 폴더를 지정하여 dist라는 폴더로 복사붙여넣기 되는 방식. https://www.npmjs.com/package/parcel-plu
PARCEL bundler 개념정리 번들러 -번들러의 개념 : 웹에서는 순수하게 html,css,js로만 기능을 수행하기에는버거운데 view,ts,svg,sass(기능보충)등의 기능들을 html,css,js(동작반영)로 변환하여 사용하는 과정이 필요 -번들러의 역할 : 외부 패키지 도움을 받아서 이 변환 과정을 도와주는 역할(즉, 필요한 외부패키지들을 직접 설치해야함) -번들러 종류 : 파슬 vs 웹팩 파슬: 구성 없는 단순한 자동번들링(세팅값추가 x 몇가지 설정만), 소형 중형 프로젝트에 적합 웹팩: 매우 꼼꼼한 구성, 중대형 프로젝트에 적합 (디테일한 옵션들까지 제공하여 확인할 작업이 많음)

티스토리툴바