[Vue.js] 웹팩(webpack)으로 빌드하기 [npm 활용하여 모듈 가져오기]

---

- 웹팩(webpack)으로 빌드하기

1. Node.js 설치

Node.js

---

2. npm으로 모듈 설치하기

#npm 초기화
npm init

npm을 초기화 시킨다.

초기화 완료

package.json 생성 완료

---

#vue 설치
npm install vue

npm으로 vue를 설치한다.

---

#개발자모드로 webpack, webpack-cli 설치
npm i webpack webpack-cli -D

맨 뒤에 -D를 붙이면 개발자모드로 설치된다.

node_modules 폴더 내부

package.json 안을 보면 설치한 모듈들을 볼 수 있다.

---

3. webpack.config.js 세팅

const path = require('path');

module.exports = {
  entry: {
    app: path.join(__dirname, 'main.js')
  },
  module: {
    rules: [{

    }]
  },
  plugins: [],
  output: {
    filename: '[name].js', // 'app.js'
    path: path.join(__dirname, 'dist')
  }  
};

main.js와 vue 파일을 만든다.

---

#webpack build 시작
npm run build

webpack이 만들어지고 있다.

---

app.js 생성 완료!

---

- 참고자료

[무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의

---