목록프론트/WebPack (3)
윤개발
1. vue.config.js 파일에 아래와 같은 내용을 추가한다. const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.join(__dirname, 'src/'), }, }, }, }; 2.webpack.config.js 파일을 생성하고 아래내용을 추가한다. const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src/'), }, }, }; 3. preferences > webpack 검색후 webpack.config.js 파일을 경로로 잡아준다. 3. 아래와..
NPM 은 Node Package Manager 이다. node 에서 사용하는 라이브러리들을 관리해준다. NPM의 장점 라이브러리 관리 측면에서 html에 직접 코드를 삽입하는 것 보다는 package.json을 통해서 관리하는 것이 보기 편하다. 라이브러리 설치 측면에서 웹에서 찾아서 넣는 것 보다 install을 통해 바로 받아오는 것이 편하다. visual studio code 또는 편집기에서 터미널을 실행한다. 설치가 잘 되어있는지 확인하기 위해 명령어를 입력한다. node -v //노드의 버전 npm -v //노드 패키지 매니저 버전 NPM 초기화 명령어 npm init 명령어를 입력하게 되면 프로젝트의 내용을 하나하나 설정할 수 있다. 모두 입력하게 되면 package.json 이 생성된다. ..
웹팩이란 프런트 엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 모듈 번들러란 자원들(HTML,CSS,JS,IMAGE)을 하나로 병합해주는 것을 말한다. 1. 임의 폴더 생성 2. npm init -y y:(기본 설정으로 하겠다는 옵션) 3. npm i webpack webpack-cli -D i: install 약자 -D --save-dev 개발용 옵션 4. npm i lodash lodash 설치 5. index.html 파일 생성 후 아래내용 붙여넣기 6. root dir에 src 디렉터리를 생성하고 안에 index.js 생성 후 아래내용 붙여넣기 function component() { var element = document.createElement('div'); /* lodash is..