728x90 webpack3 webpack - 환경변수 process.env 웹팩의 환경변수 설정 파일을 Webpack DefinePlugin을 통해서 설정할 수 있습니다. 하지만, Vue cli 3.x 부터는 Webpack DefinePlugin을 설치하지않아도 프로젝트 내에서 해당 설정을 할 수 있습니다. Vue cli를 쓰지 않는 경우 Webpack에 환경 변수 설정을 직접 추가해야합니다. 그렇지 않으면 다음과 같은 에러가 발생하고 js에서 process.env 의 환경 변수를 읽을 수 없습니다. 이러한 환경 변수 문제를 해결하기 위해 webpack.config.js에 다음과 같은 설정을 해야합니다. // webpack.config.js ... const webpack = require("webpack"); const isProduction = process.env.NODE.. 2022. 3. 25. webpack - babel 설정, regeneratorRuntime 에러 webpack 설정 시에 발생하는 대표적인 에러인 regeneratorRuntime 에 대해 다루어보겠습니다. ES8 문법인 async/await를 사용해 비동기 함수를 작성하면 브라우저에서 다음과 같은 에러가 발생합니다. async/await 함수 호출 예시 import axios from 'axios' export async function test() { const resposne = await axios.get( 'https://api.hnpwa.com/v0/news/1.json' ); console.log(resposne.data); return resposne.data; } async/await 지시어를 써서 정상적으로 비동기 api를 호출하기 위해서 babel을 설정해야합니다. 우선 아래의 .. 2022. 3. 25. webpack - devServer CORS 에러 설정 프론트 어플리케이션에 webpack devServer를 적용하고 다른 어플리케이션의 api를 호출하거나 외부 api를 호출하면 무조건 CORS 에러가 발생합니다. webpackconfig.js 설정 파일을 다음과 같이 수정해야합니다. // webpack.config.js const path = require("path"); const webpack = require("webpack"); const isProduction = process.env.NODE_ENV == "production"; ... const config = { ... devServer: { open: true, host: "localhost", hot: true, // 자바스크립트나 CSS 스타일시트를 변경하면 해당 모듈이 바로 업데이트.. 2022. 3. 25. 이전 1 다음 728x90
