본문 바로가기

전체 글

 (37)
webpack 나머지 패키지 설치 [패스트캠퍼스 챌린지 25일차] SCSS, Autoprefixer(PostCSS), babel 패키지 설치하고 웹팩 세팅 방법 SCSS 연습하면서 css로 작성했던 거 다 scss로 바꿔주기 루트 경로의 폴더와 그 안에 파일, main.js import 경로 webpack.config.js modules에 매칭 코드(정규표현식으로 작성한 거) → 근데 css를 찾아야 할 수도 있으니 s 뒤에 ? 물음표 해주기 일케 하면 css랑 scss 둘 다 찾아 낼 거다. /\.s?css$/ (해석) s라는 단어가 있을 수도 있고 없을 수도 있고 패키지 설치 npm i -D sass-loader sass 두 개의 패키지가 하는 역할 sass-loader를 통해서 웹팩에서 해당하는 scss파일을 읽어낼 건데, 읽을 때 그 문법을 실제로 해석해 줄 s..
webpack plugin, 정적파일 연결, module[패스트캠퍼스 챌린지 24일차] plugins html 파일을 삽입해서 개발 서버를 오픈해보자 npm i -D html-webpack-plugin → 설치 후 webpack.config.js로 이동해서 require 작성 const HtmlPlugin = require('html-webpack-plugin') 해석) 'node_modules에서 html-webpack-plugin을 가져와서 HtmlPlugin에 할당하겠다' 그리고가져온 저 녀석을 어디에서 실행할 것인지 구성 옵션으로 명시해줘야함 → 내보내기(module.exports) 안에 plugins 배열 데이터 작성 new 태그 붙여서 생성자함수처럼 실행해주기 → plugins: [new HtmlPlugin()] 일케 하면 어떤 결과가 반환되겠지? 그..
바벨, webpack[패스트캠퍼스 챌린지 23일차] Babel 바벨? ECMAScript2015(ES6)+ 코드를 이전 자바스크립트 엔진에서 실행할 수 있는 이전 버전과 호환되는 JS버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JS 트랜스 컴파일러 바벨 설치하는 방법 npm i -D @babel/core @babel/preset-env 두 개의 패키지 설치 루트 경로에 .babelrc.js 파일 생성 내부에 Node.js의 내보내기 작성 mudule.exports = { presets: ['babel/preset-env'] } : 앞으로 작성하는 모든 JS는 바벨을 통해 ES5의 문법으로 변경되어 브라우저에서 동작 package.json에 옵션 추가 "browserlist" : [ ">1%", "last 2 versions" ] 어디..

티스토리툴바