Vue.js webpack 설정

안녕하세요.

저희 팀에서 요즘 공부 방향으로 삼은 front framework 중 하나인 vue.js를 공부하면서 webpack에 대한 정리가 필요할 것 같아 기록하게 되었습니다.

Vue를 위한 간단한 webpack 이라고 생각하시면 될 것 같습니다.

 

먼저 필요한 자원은 node와 node를 설치한 후 npm, 그리고 vue입니다.

 

npm 초기화

명령어

npm init

 

생성되는 파일

package.json

package-lock.json

 

파일의 내용과 설명

내가 쓰는 남의 소스를 정리해 두는 파일이다 - 제로초 님 방송

이후에 

npm i vue

와 같은 npm에서 install 하는 것들의 의존성(?) 또는 파일의 버전들이 dependency 됩니다.

ex)

{
"name": "npm-init-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
  { "build": "webpack" },
"author": "",
"license": "ISC",

// npm i vue 이후 생성되는 구문
"dependencies":
  { "vue": "^2.6.10" }
}

 

project에서 가장 중요한 파일은 main 키워드의 값인 index.js입니다.

수정된 부분은 scripts 밑에

test => build

echo ... => webpack

 

webpack은 많은 스크립트를 하나로 합치는 것

명령어

npm i webpack webpack-cli -D

• option의 -D는 dev, 개발환경 명시의 옵션입니다.

 

생성되는 directory

node_modules

 

directory 간략 설명

webpack이나 webpack-cli의 경우 개발할 때 필요하고 배포 시 필요하지 않기 때문에 개발을 명시 했으며, 

명시한 패키지(남의 소스)와 관련 의존성 모두 설치됩니다.

 

지금까지의 명령어 후 다운로드 된 패키지들을 관리하기 위해 webpack.config.js 파일을 생성 후 관리합니다.

 

webpack.config.js 설정

webpack.config.js 파일을 생성하고 내용을 정리합니다.

const path = require('path');

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

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

 

---

const path = require('path');

app: path.join(__dirname, 'main.js'),
...

path: path.join(__dirname, 'dist'),

• node에서 절대경로를 적을 때 지원해주는 path 함수 (node가 만들어 준 script)
• path.join() 함수를 제공
• __dirname: 현재 경로
• 두 번째 인자인 string을 연결해줍니다.

 

---

    entry: {
        //app: './main.js',
        app: path.join(__dirname, 'main.js'),
    },

 

• entry는 하나로 합쳐질 파일입니다.
• app이라는 key는 main.js 사용자가 생성한 실제 파일을 app.js라는 이름으로 생성할 name의 설정입니다.
• app, main.js의 값들은 변수로 활용됩니다.
• ex) app은 root나 myfile 등의 key로 활용될 수 있습니다.

 

---

 

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

• entry에 정의된 파일의 output 설정입니다.
• [name] = entry.app에 대칭되어 file이 생성됩니다.
• path는 directory 경로의 설정으로, 실제 값은 사용자가 정의하는 것입니다.
• ex ) ./script-source 와 같은 값들이 가능합니다.

 

---

    module: {
      rules: [{
      	test: '/\.vue$/',
        loader: 'vue-loader',
      }]
    },

• webpack의 핵심입니다.
• script file을 합칠 때 어떻게 합칠 것인지의 설정을 합니다.
• webpack은 javascript만 integration 하기 때문에 확장자가 vue인 파일은 build할 수 없습니다.
• test의 .vue로 끝나는($) 확장자는
• loader의 vue-loader를 통해 빌드를 하는 규칙을 설정하는 것입니다.

 

webpack의 실행

 

 

이 글은 제로초 님 inflearn 강의를 바탕으로 정리하였습니다. 늘 __dirname이 무엇인지, package가 무엇인지 범위는 넓고 서버에 지나친 관심으로 접근하기가 어려웠는데 정말 감사합니다.

감사합니다.