YSHUSH

npm init npm i -D snowpack npm i -D @snowpack/plugin-sass npm i -D eslint npm i --save-exact prettier npm i -D eslint-config-prettier eslint-plugin-prettier · 루트경로에 public, src 폴더를 만들고 public폴더에 index.html파일 생성, src폴더에 js폴더 - index.js, scss폴더 - style.scss생성 후 구조작성 index.html - dist폴더에서 css와 js를 import 해야한다. · snowpack.config.js파일 생성 후 module.exports = { mount: { public: { url: "/", static: true ..

// package.json 초기화 npm init -y // 웹팩 관련 패키지 설치 npm i -D webpack webpack-cli webpack-dev-server // 플러그인 설치 npm i -D terser-webpack-plugin npm i -D html-webpack-plugin npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin · 루트경로에 webpack.config.js생성 후 const path = require("path"); const TerserPlugin = require("terser-webpack-plugin"); const HtmlWebpackPlugin = require("html-web..

// npm 프로젝트로 변경 npm init -y // webpack 설치 npm i -D webpack webpack-cli webpack-dev-server@next // 플러그인 설치 npm i -D html-webpack-plugin// html 로드 가능하게 하기 npm i -D copy-webpack-plugin// 정적 파일 연결 npm i -D css-loader style-loader// css 연결 npm i -D sass-loader sass// sass 연결 npm i -D postcss autoprefixer postcss-loader// 오토프리픽서 npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime np..

바벨 설치 npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime .babelrc.js파일 생성 후 // 이렇게 하면 작성하는 모든 문법은 ES5문법으로 변경되어 적용된다. module.exports = { presets: ['@babel/preset-env'], plugins: [ ['@babel/plugin-transform-runtime'] ] } package.json 끝부분에 내용 추가 , "browserslist": [ "> 1%", "last 2 versions" ]