안녕하세요. 김용성입니다.
이번 포스팅에서는 지난 webpack prologue 포스팅에서 진행하던 프로젝트에 webpack을 도입하고 기본적인 명령어에 대해 알아본 뒤에 webpack configuration 파일 생성을 진행해보도록 하겠습니다.
webpack 모듈 설치
webpack을 사용하기 위해서는 패키지 매니저가 필요합니다. 저는 npm을 사용할 것이므로 프로젝트 디렉토리에서 다음과 같이 명령어를 입력해줍니다.
$ npm init
package.json이 생겼나요??
이제는 npm을 통해 webpack을 설치해주도록 할게요.
$ npm install -d webpack webpack-cli
개발을 위한 모듈 설치이므로 -d 명령어를 앞에 붙여주고 진행하겠습니다.
이런식으로 package.json의 내용이 업데이트 되고, node_modules 디렉토리가 생기셨나요?
webpack 도입
이제 우리가 지난번에 만들었던 index.html 내부의 script 태그를 별도 JavaScript 파일로 빼주겠습니다. 저는 source 디렉토리 내부에 index.js를 만들어 코드를 붙여넣었습니다.
//index.js
import lastName from "./source/kim.js"
import firstName from "./source/yongseong.js"
document.querySelector("#root").innerHTML = lastName + " " + firstName
이제 우리는 이 index.js파일을 entry 파일로 만들어 줄것입니다.
entry 파일이 뭔가요?
우리가 만드는 어플리케이션의 가장 최상단(입구)에 해당하는 파일입니다. 현재 index.js파일이 kim.js와 yongseong.js 파일을 포함하고 있는데 이 것을 하나로 bundling 해준 뒤 entry파일로 만들어주면 어플리케이션에서 이 entry파일 하나를 이용하여 저번에 우리가 만들었던 script코드들을 모두 사용할 수 있는 것이죠. 🤗
우리는 이 entry파일을 public이라는 디렉토리에 넣을 것입니다.
상단 디렉토리에 public이라는 디렉토리를 추가해주도록 하겠습니다.
그 후 다음과 같이 명령어를 입력하겠습니다.
$ npx webpack --entry ./source/index.js --output-path ./public
이 명령어는 외울 필요는 없습니다. 제가 뒤에서 더 간단한 방식을 알려드릴 예정이기 때문입니다. 의미에 대해서만 알아보자면 ./source/index.js파일을 entry파일로 bundling 해주는데 이렇게 bundling 된 파일을 public 디렉토리에 넣어주겠다는 의미예요. 명령어를 실행시켜볼까요?
만들어준 public 디렉토리 내부에 다음과 같이 main.js가 생겨났고, 그 내부 내용을 살펴보면 다음과 같음을 보실 수 있을겁니다.
// main.js
;(() => {
"use strict"
document.querySelector("#root").innerHTML = "Kim Yongseong"
})()
우리가 원하는 형태가 만들어졌죠??
잘 동작하는지 확인하기 위해 index.html 파일로 돌아와 script src를 설정해주겠습니다.
<!-- index.html -->
<html>
<head>
</head>
<body>
<h1>Webpack practice</h1>
<div id='root'></div>
<script src="./public/main.js">
</script>
</body>
</html>
그 전에 작업했던 것과 똑같은 결과가 출력되는 것이 보이시죠?
그렇다면 bundling 후 성공적으로 entry파일 적용 되어진 것입니다.
우리가 webpack을 사용해서 얻는 이점은 inspector 창의 network 탭에서 보다 더 직관적으로 확인할 수가 있습니다. 이전 포스팅에서는 우리가 kim.js와 yongseong.js 이렇게 두개의 파일을 받아왔었는데 이제는 다음과 같이 main.js 파일 하나만 로드해오는 것을 확인하실 수 있을겁니다.
지금은 파일 2개를 하나로 만들어준 것이라 '이게 그렇게나 큰 장점일까?' 하는 없을 수 있지만, 만약 우리가 저런 js파일을 100개 1000개 가지고 있다면?? 굉장히 효율적인 작업이겠죠??
또한 bundling파일을 만듦으로써 우리가 만든 웹은 webpack이 알아서 오래된 브라우저에서도 실행 가능하게끔 만들어줍니다. import를 통해 module을 가져오는 것이 인식안되는 예전 브라우저에서도 우리가 구현한대로 움직이게 된거예요. 정말 좋지않나요?
여기까지 하셨다면 여러분들은 프로젝트에 webpack을 적용하실 수 있게 된겁니다. 그리 어렵지 않은 내용이죠?
이제 조금 더 편하게 webpack을 적용시키는 방법을 알려드릴께요.
webpack configuration
위 단계에서 본 entry파일 생성 명령어는 너무 길어요. 우리가 JavaScript 파일 즉 모듈 내의 내용을 변경시켜줄 때마다
$ npx webpack --entry ./source/index.js --output_path ./public
이 명령어를 입력해야한다면 상당히 귀찮을거예요. 그런 귀찮음으로부터 벗어나기 위해서는 webpack에 설정파일을 도입해야하는데요.
지금부터 다른 방식으로 entry파일을 만드는 방법을 알려드리도록 하겠습니다.
최상단 디렉토리에 webpack.config.js라는 파일을 만들어줍니다.
configuration 파일은 여러가지 설정을 담는 파일이라는 것 알고계시죠?
해당 사이트에 가보시면 webpack의 기본적인 configuration 파일의 예시가 나와있으니 참고하시면 좋습니다.
제가 아까 입력한 명령어는 configuration 파일로 다음과 같이 작성할 수 있습니다.
//webpack.config.js
const path = require("path")
module.exports = {
entry: "./source/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "main.js",
},
}
__dirname 이라는 낯선 단어가 보이시죠? 이것은 현재 파일(webpack.config.js)의 파일경로를 말하는 것입니다. webpack.config.js 파일을 참조하여 그렇게 만든 파일을 main.js라는 이름으로 public디렉토리 내부에 넣어준다는 의미이죠.
이제 기존에 만들었던 public 디렉토리의 main.js파일 다음과 같이 명령어를 입력해주겠습니다.
$ npx webpack --config webpack.config.js
명령어를 수행하고 나면 public 디렉토리에 아까와 같이 main.js파일이 생성되었음을 확인하실 수 있을겁니다.
이 방식의 가장 큰 장점은 이후부터는 간단한 명령어로 webpack 변동 사항을 적용할 수 있다는 점입니다.
이제부터는 다음과 같은 명령어로 webpack 변경사항을 반영할 수 있습니다.
$ npx webpack
mode 도입
이제 모드를 도입해보도록 하겠습니다.
위 실습을 따라하시다보면
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
다음과 같은 warning이 계속해서 눈에 거슬리셨을거예요.
이것은 모드의 기본값이 정의되어있지 않기에 뜨는 warning인데요. 개발 모드(development)인지 프로덕션 모드(production)인지에 대한 명시를 해주면 간단히 해결할 수 있습니다.
우리는 현재 개발을 진행하고 있으므로 development mode라고 명시를해주어야겠습니다.
webpack.config.js에 mode는 다음과 같이 명시해주면 됩니다.
//webpack.config.js
const path = require("path")
module.exports = {
mode: "development",
entry: "./source/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "main.js",
},
}$ npx webpack
이렇게 변경한 뒤에 위 명령어를 입력해주면 기존에 보여졌던 warning이 발생하지 않는다는 것을 확인하실 수 있을겁니다.
이러한 모드는 develpment 모드와 production 모드를 별도의 webpack config 파일로 만들어주어서 그때그때 webpack 적용 config파일을 변환해주어도 되고, webpack 내부에 조건문을 적용하여 handling하실 수도 있습니다.
마무리
오늘은 webpack 모듈을 설치해보고 기본적인 설정 및 적용을 해보았는데요. 낯선 작업일 수 있기 때문에 직접 한번 따라해보시는 것을 추천드립니다. 또한 webpack 모듈이 최근에 업데이트가 되었는지 명령어가 몇가지 바뀌었더라구요..🤦♀️ 이러한 부분도 잘 체크해주세요!
포스팅 글 읽어주셔서 감사합니다. 다음 webpack 개론에서는 로더에 대해서 알아보고 적용해보는 포스팅을 진행하도록 하겠습니다 :)
