Webpack 설정하기

webpack이란?

웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러

설치

npm init -y

package.json 생성

npm i -D webpack webpack-cli

개발 의존성으로 webpack과 터미널에서 webpack을 동작하게 해주는 cli 설치

// package.json

"scripts": {
  "build": "webpack"
},

webpack을 동작시킬 수 있는 명령 추가

구성 옵션

루트에 webpack이 동작할때 필요한 구성 옵션 설정을 위해 webpack.config.js파일을 생성해야 한다.

Node.js 환경이라 import, export는 사용이 불가능하다.

const path = require("path");
module.exports = {
	entry: "./src/main.js", // 진입점
	output: {
		path: path.resolve(__dirname),
	}, // 결과물
};

dist라는 폴더에 루트 경로의 정보를 가지고 있는 __dirname을 반환해준다.

여기까지만 세팅하고 npm run build를 하게 되면 만든 js파일을 해석해 최적화된 js파일을 dist폴더에 저장시킨다.

여러가지 js 파일이 있어도 하나의 js 파일로 bundle시킨다.

Vue 파일 로더

기본적으로 webpack은 자바스크립트 파일만 읽는데 프레임워크나 라이브러리를 사용하는 경우 이 파일들을 읽을 수 있도록 loader를 따로 설정해야한다.

이 글에서는 Vue를 기준으로 작성하였다.

// webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/, // .vue 확장자만 탐색
      use: "vue-loader", // vue loader의 도움을 받아 해석
    },
  ],
},

위에서 설정했던 기본 설정에 추가적으로 어떤 loader의 도움을 받을지, 어떤 파일을 읽을지를 명시한다.

npm i -D vue-loader@next

우선, vue-loader를 설치한다.

npm i -D @vue/compiler-sfc

이후에, vue파일을 읽을 프로그램(컴파일러)도 설치한다.

주의할 점은 dependencies의 vue 버전과 devDependencies의 vue/compilter-sfc의 버전이 일치해야 제대로 동작한다.

여기서 끝난게 아니고, 플러그인도 명시해야 한다.

// webpack.config.js

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
	// 생략
	plugins: [new VueLoaderPlugin()],
};

여기까지만 하면 기본적인 세팅은 끝났는데 현재 폴더구조에서

index.html 파일이 dist의 js파일을 인식하지 못하고 있다. 따라서 npm run build를 할 때마다 dist폴더 안에 index.html파일이 들어가게 하려면 html 플러그인을 사용해야 한다.

npm i -D html-webpack-plugin

// webpack.config.js

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlPlugin = require("html-webpack-plugin");

module.exports = {
	// 생략
  plugins: [
    new VueLoaderPlugin(),
    new HtmlPlugin({
      template: path.resolve(__dirname, "src/index.html"),
    }),
  ],
};

플러그인을 설치하고 추가한다.

이제는 dist 폴더안에 자동으로 main.js와 연결된 index.html이 생성된다.

css 파일 로더

Vue파일의 기본 구조는 다음과 같다.

<template>
	<h1>{{ msg }}</h1>
</template>

<script>
	export default {
		data() {
			return {
				msg: "Hello vues!",
			};
		},
	};
</script>

<style>
	h1 {
		color: red;
	}
</style>

template, script, style은 각각 html, js, css와 대응 된다고 보면 되는데 지금 세팅에서는 css를 읽지 못하고 있으므로 loader를 설치하고, rules세팅에 추가를 하자.

npm i -D css-loader vue-style-loader

module: {
  rules: [
    {
      test: /\.vue$/, // .vue 확장자만 탐색
      use: "vue-loader", // vue loader의 도움을 받아 해석
    },
    {
      test: /\.css$/,
      use: ["vue-style-lodaer", "css-loader"],
    },
  ],
},

로더를 명시할때 순서도 중요하다. use 옵션은 오른쪽에서 왼쪽, 아래에서 위쪽으로 평가가 되므로 먼저 평가되어야 하는 css-loader를 마지막에 명시한다.

scss 파일 로더

Vue에서 scss를 사용하려면 다음과 같이 작성한 후, sass와 loader를 설치하고, 옵션 설정을 하자.

<style scoped lang="scss">
	$color: orange;
	h1 {
		color: $color;
	}
</style>

// webpack.config.js

{
  test: /\.s?css$/,
    use: ["vue-style-loader", "css-loader", "sass-loader"],
},

npm i -D sass sass-loader

import시 확장자 생략

// webpack.config.js

module.exports = {
	resolve: {
		extensions: [".vue", ".js"],
	},
}

경로별칭

프로젝트가 커지고 폴더구조가 자주 변경된다면 상대경로를 통해서 파일을 불러오는 것이 불편하다.

경로별칭을 사용해 문제를 할 수 있다.

// webpack.config.js

module.exports = {
	resolve: {
		alias: {
			"~": path.resolve(__dirname, "src"),
		},
      		// 생략
	},
}

src폴더에 접근할때 ~로 접근이 가능하여 상대경로가 아닌 절대경로로 접근할 수 있다.