본문 바로가기

분류 전체보기474

Webpack - html파일을 이용한 개발화면 띄우기 패키지를 설치한다. 명령어: npm i -D html-webpack-plugin webpack.config.js파일에서 해당 패키지를 가져와서 사용 // import // 개발 화면을 띄워주기 위해서 패키지 가져오기 const HtmlPlugin = require('html-webpack-plugin'); // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정 plugins: [ // 위에 선언한 변수와 맞춰주어야 한다. new HtmlPlugin({ // 패키지를 실행하면 기본적으로 동작할 html 파일 지정 template: './index.html' }) ] 코드 작성후 실행 명령어: npm run dev 만약 localhost 부분이 나오지 않는다면 아래 코드를 입력하여 개발서버를 지정해.. 2021. 7. 8.
WebPack 시작 만약 npm이 설치되지 않았다면 설치를 진행해야한다. 명령어: npm init -y webpack을 사용하기 위해 3가지 패키지를 설치해야 한다. 설치 명령어: npm i -D webpack webpack-cli webpack-dev-server@next webpack: webpack을 사용하기 위한 핵심적인 패키지 webpack-cli: webpack의 커맨드 라인 인터페이스(명령어) 사용을 지원해주는 패키지 webpack-dev-server: 개발서버를 활용하여 수정할 때 마다 자동으로 갱신되도록 설정(bundler는 자동으로 설정된다.) webpack을 사용하기 위해 package.json 파일을 수정한다. webpack을 실행하기 위해서는 따로 설정 파일을 작성해야한다. bundler를 사용할 경.. 2021. 7. 8.
Parcel - CLI CLI: 커맨드 라인 인터페이스 공식 사이트 https://ko.parceljs.org/cli.html 🖥 커맨드 라인 인터페이스(CLI) 시작하기 기능 📦 애셋 유형 고급 🖥 커맨드 라인 인터페이스(CLI) 명령어 Serve 개발용 서버를 시작합니다. 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원합니 ko.parceljs.org Parcel 설정을 변경해주는 방법을 확인해 볼 수 있다. 포트변경 예 -> scripts에 dev 항목에 포트를 지정해준다. 변경된 포트로 열리는 것을 확인 2021. 7. 5.
Pacel - Babel Babel 최신의 문법을 예전의 문법으로 변환해 주는 기능 npm 프로젝트에 설치 : npm i -D @babel/core @babel/preset-env root 경로에 .babelrc.js 파일 생성 // 바벨을 통해서 모든 JS 파일은 ES5 형식으로 변환되어 브라우저에서 동작 module.exports = { presets: ['@babel/preset-env'] } package.json 파일에 browserslist 항목 추가 "browserslist": [ "> 1%", "last 2 versions" ] main.js 파일에 비동기 함수 생성 // 비동기 함수 생성 async function test(){ const promise = Promise.resolve(123); // 기다림 co.. 2021. 7. 5.
Parcel - autoprefixer 구형 브라우저에서도 최신의 CSS 기술이 적용하도록 보험을 들어두기 위해 공급 업체 접두사(Vendor Prefix)를 붙여준다. Vendor Prefix를 자동으로 붙여주는 방법 package 설치: npm i -D postcss autoprefixer package.json 파일에 추가 "browserslist": [ "> 1%", "last 2 versions" ] 전세계 점유율이 1% 이상인 모든 브라우저 마지막 2개 버전까지 지원하겠다고 명시해준다. .postcssrc.js 파일을 생성 뒤에 rc(Runtime Configuration의 약어)가 붙은 파일은 구성 파일을 의미한다. 작성 // ESM -- 브라우저에서 사용하는 방법 (import, export) // Common.JS -- nod.. 2021. 7. 5.
Parcel - 정적 파일 연결 이미지 가져오기 사이트: https://pixabay.com/ favico 이미지 만들기 사이트: Online ICO converter ICO Converter Converts images to the ICO format for your websites or applications. www.icoconverter.com 다운받은 파일을 선택하고 옵션을 선택 후 저장한다. 프로젝트안에 이미지 파일을 넣어준다. npm 프로젝트 실행 (favicon.ico 파일은 적용이 되지 않았다.) plugin 설치 사이트: https://www.npmjs.com/package/parcel-plugin-static-files-copy parcel-plugin-static-files-copy ParcelJS plugin t.. 2021. 7. 5.

티스토리툴바