Frontend/Webpack&Vite (5) 썸네일형 리스트형 vite + typescript 절대경로 설정 아래 이미지처럼 상대경로로 찾던 것을 절대경로로 바꾸고 싶을때 vscode 설정 Setting 옆 아이콘 누르면 json으로 입력 가능 // setting.json "javascript.preferences.importModuleSpecifier": "non-relative", "typescript.preferences.importModuleSpecifier": "non-relative", --- src 별칭을 ~로 할 것인데 @로 하고 싶으면 ~ 대신 @ 작성 vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export defaul.. Error: Cannot find module 'webpack-cli/bin/config-yargs' 이게 안맞는 버전으로 할때 나는 에러.5버전대로 올렸더니 발생했는데 꼭 5버전대가 아니여도 웹팩 관련 패키지끼리 버전 안맞으면 나더라.이상 없이 돌아가는 버전 확인 해 본 것{ "webpack": "^4.44.2", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.11.0" } 전역 경로 관리 https://webpack.js.org/plugins/define-plugin/#root webpack.config.js resolve: { modules: [ path.join(__dirname, "src"), "node_modules" ] } https://blog.andrewray.me/autocomplete-es-modules-webpack-vscode/ [webpack] webpack.config, react-hot-loader webpack.config 설정 자주 쓰는 모듈 path, webpack 상단 변수로 모듈 선언const path = require('path'); const webpack = require('webpack'); module options의 presets에 @babel/preset-env는 배열로 선언하면 babel이 컴파일 할 대상 브라우저도 지정 가능 표현식은 아래 사이트 참고 https://github.com/browserslist/browserslist#queries module.exports = { // ...entry module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { pres.. [webpack] 기본 세팅 리액트를 하기 위한 webpack 세팅 CRA만 쓰지말고 직접 세팅해보자! npm 사용준비 프로젝트 폴더 열고 npm init 리액트 설치 npm i react react-dom 웹팩 설치(-D: 개발에만 쓰이는것) npm i -D webpack webpack-cli react문법을 위한 babel 설치 npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties babel-loader : 바벨과 웹팩을 연결 @babel/core : 바벨 기본적인 파일 @babel/preset-env : 브라우저에 맞게 최신문법을 예전문법으로 변환 @babel/preset-react.. 이전 1 다음
