Giter Site home page Giter Site logo

vue3-webpack-template's Introduction

Webpack 기본 템플릿

webpack: 모듈(패키지) 번들러의 핵심 패키지
webpack-cli: 터미널에서 Webpack 명령(CLI)을 사용할 수 있음
webpack-dev-server: 개발용으로 Live Server를 실행(HMR)

html-webpack-plugin: 최초 실행될 HTML 파일(템플릿)을 연결
copy-webpack-plugin: 정적 파일(파비콘, 이미지 등)을 제품(dist) 폴더로 복사

sass-loader: SCSS(Sass) 파일을 로드
postcss-loader: PostCSS(Autoprefixer)로 스타일 파일을 처리
css-loader: CSS 파일을 로드
style-loader: 로드된 스타일(CSS)을 <style><head>에 삽입
babel-loader: JS 파일을 로드

@babel/core: ES6 이상의 코드를 ES5 이하 버전으로 변환
@babel/preset-env: Babel 지원 스펙을 지정
@babel/plugin-transform-runtime: Async/Await 문법 지원

sass: SCSS(Sass) 문법을 해석(스타일 전처리기)
postcss: Autoprefixer 등의 다양한 스타일 후처리기 패키지
autoprefixer: 스타일에 자동으로 공급 업체 접두사(Vendor prefix)를 적용하는 PostCSS의 플러그인

주의사항!

  • npm i -D webpack-dev-server@next로 설치(webpack-cli 버전(@4^)과 일치)!
  • package.json 옵션으로 browserslist 추가!
  • .postcssrc.js 생성(PostCSS 구성 옵션)!
  • .babelrc.js 생성(Babel 구성 옵션)!

vue3-webpack-template's People

Contributors

sane01 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.