본문 바로가기
반응형

webpack3

[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(4) - 웹팩과 바벨 동시 사용 시 트랜스파일링 변환 오류 이전 글 [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정 에서 바벨 설정 후 웹팩 빌드를 하였는데, 이상하게 IE에서 오류가 발생해 작동을 안하는 현상이 발생하였다. 화살표 함수가 그대로 존재하기 때문에 에러가 발생한것인데, babel 설정에 target을 줘도 문제가 해결되지않았다. 도대체 왜 이런것일까...? 이것때문에 몇시간을 소비했는지 모르겠다. 찾아보니까 웹팩에 문제가 있었더라 Webpack v5 부터 트랜스파일을 기본적으로 es6로 한다고 한다. 버전이 올라가면서 변경될것인지 아니면 계속 이상태로 갈것인지는 알 수 없으나, 일단 변경을 해주는게 맞다 싶다. 그래서 webpack.config.js 파일에서 target 설정을 줄 수 있는데, https:.. 2022. 3. 2.
[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(2) - 웹팩 기본 loader 설정하기 VSCode에서 웹팩(Webpack)을 설정하게되면 webpack.config.js 웹팩 설정파일을 사용하게 된다. 이 webpack.config.js 파일에서 loader를 설정하는 방법에 대해 알아보자. loader를 설정하기에 앞서 loader 설정을 왜 해주는지에 대해 설명하자면, js끼리만 import해서 사용한다면 웹팩을 빌드하면 상관 없지만 여기에 css 같은것들이 들어가면 오류가 발생하기 때문이다. 웹팩은 자바스크립트 뿐만 아니라, 이 loader를 통해 css나 이미지, 웹폰트, vueJS 등 다양한 종류의 파일을 함께 번들링할 수 있는데, 사용법만 알면 그 외에는 동일하게 처리하면 되기 때문에 가장 흔하게 사용되는 css관련한 loader에 대해서만 정리하고자 한다. 1. CSS 로더를.. 2022. 3. 1.
[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(1) - 웹팩 기본 설정 VSCode에서 웹팩(Webpack)을 설정해보자. 당연하게도 node.js를 통해 뭔가를 설치하고 설정하려면 package.json이 있어야한다. package.json이 있다면 이제 1. 명령어를 통해 웹팩 라이브러리를 설치한다. (둘 중 하나만) npm install --save-dev webpack webpack-cli npm install -D webpack webpack-cli 이러면 설치가 진행되며, 설치가 완료되고 나서 package.json을 살펴보면 다음과 같이 나와있다. { "name": "prj01_vanillajs_es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \".. 2022. 3. 1.
반응형
TOP