KodeVvon's World

모듈과 번들러 모듈 특정 기능을 가진 작은 코드 단위 기능이 비슷한 것들을 모아서 하나의 의미 있는 파일로 관리하는 것 커다란 장치나 배열 내에서 비교적 작은 크기의 부품 독립적으로 설치되고, 교체되고, 사용될 수 있도록 설계된 구성요소 번들러 의존성이 있는 모듈 코드를 하나(또는 여럿)의 파일로 만들어주는 도구 지정한 단위로 파일들을 패키지로 만들어주는 도구 모듈 번들러 웹개발에 있어 앱을 구성하는 자원(html,css,javascript,image 등)을 모두 각각의 모듈로 보고, 이를 모두 합쳐주는 도구 하나의 파일(또는 소량의 파일)로 결과물을 만들어주기 때문에 빠른 로딩 속도, 높은 성능을 얻을 수 있음 Parcel, Rollup, Webpack등이 있다 Parcel 빠르고 간단하게 앱을 만들 ..

//webpack.config.js module.exports = { //... resolve: { // 편의를 위해 생략할 확장자 extensions: [".js", ".json"], // 모듈 불러오는 경로의 별칭 설정 alias: { '~': `${__dirname}/src`, '@': `${__dirname}/src`, }, //... } 웹팩으로 프로젝트 작업 전, 웹팩 설정에서 resolve의 alias에 원하는 별칭을 설정해두면 import/export할 때마다 조금 더 단축(?)시켜 사용가능하기 때문에 생각보다 편하다 원하는 확장자를 extensions에 넣으면 확장자 명시 없이도 웹팩이 자동으로 확인하기 때문에 편리하다. .js, .vue같은 것들을 넣으면 좋다 :D

Uncaught ReferenceError: process is not defined solution 1. npm i process install process 2. add plugin setting in webpack.config.js const webpack = require('webpack') ... module.exports = { ... plugin:[ ... new webpack.ProvidePlugin({ process: 'process/browser', }) ] }

NPM 웹팩(WebPack) 번들러 시작하기 1 NPM으로 웹팩(WebPack) 번들러 개발서버(dev server) 구축하기 웹팩 번들러 시작하기 1 에서 진행했던 것은 main.js를 entry, output으로 적용하는 것으로 간단히 build만 하면 문제없었다. 그러나 개발서버를 이용하면서 작업하려면 브라우저가 읽을 수 있는 html파일,css 등이 필요하다 웹팩이 이 파일들을 읽고, output으로 뽑아낼 수 있도록 하는 추가 설정이 필요한 것이다 1. npm i -D html-webpack-plugin html plugin을 개발용 패키지로 설치한다 2. webpack.config.js에서 플러그인 추가 webpack.config.js에서 node_modules에 새로 설치한 패키지를 가져와 ..

NPM으로 웹팩(WebPack) 번들러 기본 세팅하기 웹팩은 워낙 범위가 크고 다양해 세세한 설정이 필요하지만, 프로젝트 규모가 커질 때 그 진가를 발휘한다 프로젝트 시작하기 1. npm init -y 폴더 생성 후 cli로 들어가서 npm init -y 입력 package.json 파일이 생긴다 2. npm i -D webpack webpack-cli webpack-dev-server@next 모듈 번들러의 대명사답게 웹팩은 기본적으로(?) 3개부터 설치하고 시작한다 webpack, webpack-cli, webpack-dev-server@next dev-server설치에서 @next는 cli와 버전을 일치시키기 위한 추가 키워드 3. package.json에 scripts 추가 과정1에서 생겼던 pa..

Parcel dev서버로 작업 중 async await을 사용하자 문제가 발생했다 Uncaught ReferenceError: regeneratorRuntime is not defined 구글링의 결과, 최신(?) 문법인 async를 사용했기 때문에 등장한 문제인 것 같다. async를 사용한 파일에서 babel-polyfill을 import하라고 했으나.... 아마도 이것은 이전 해결방식이었나보다 Babel 7.4.0 이상을 사용하는 경우 위의 polyfill 방법은 해결되지 않는다..! 그래서 아래 방법으로 해결했다 npm install regenerator-runtime -D 1. 일단 npm으로 regenerator-runtime 설치 2. package.json에서(package-lock.jso..