자바스크립트 프로젝트 환경 설정 (1) - NPM, Webpack

최근에 바닐라 자바스크립트 프로젝트를 시작하면서 환경 설정을 진행했던 부분에 대해서 기록하고자 합니다. 프로젝트 기본적인 환경설정을 위해 사용한 기술들은 다음과 같습니다. 이번 글에서는 각 기술들에 대한 간단한 설명과, 어떻게 설정했는지에 대해서 작성해보도록 하겠습니다.

• npm
• Webpack
• Babel
• Eslint
• Editorconfig
• Husky
• Jest

 

NPM

Node Package Manager의 줄임말로, Node.js 패키지를 관리하는 도구입니다. npm은 프로젝트 환경설정에 가장 기본이기 때문에 빠르게 package.json 파일의 script 부분과 .nvmrc 파일만 보고 가도록 하겠습니다.

// package.json
...
"scripts": {
  "test": "jest --config jest.config.js",
  "build": "webpack",
  "start": "webpack serve --open",
  "lint": "eslint ./src ./test"
},
...

• test: 테스트를 실행하기위한 명령어입니다. jest를 사용했습니다.
• build: 웹팩을 이용해 빌드를 합니다.
• start: webpack-dev-server를 이용해 개발 서버를 띄웁니다.
• lint: eslint를 사용해 코드 포맷팅을 합니다.

.nvmrc

.nvmrc 파일은 프로젝트에서 사용하는 node 버전을 명시하기 위해 사용합니다. 다른 사람과 함께 프로젝트를 개발한다면 꼭 필요하다고 생각합니다. nvm use 명령어를 통해 해당 파일에 명시된 노드 버전을 사용하도록 한 뒤 프로젝트를 실행 혹은 개발할 수 있습니다. 저는 현재 LTS 버전인 16.17.0으로 설정하였습니다.

 

Webpack

흔히들 Webpack을 자바스크립트를 '빌드'하기 위해 사용한다고 알고 있습니다. 완전히 틀린말은 아니지만, '빌드'라는 단어는 오해를 일으킬 수 있다고 생각합니다. 왜냐하면 자바스크립트는 컴파일러 언어가 아니기 때문에 '빌드'되지 않기 때문입니다. 그렇다면 Webpack의 정확한 정의에 대해서 알아보겠습니다.

 

공식 사이트에 따르면 Webpack이란 자바스크립트 '정적 모듈 번들러'입니다. 즉, Webpack은 정적인 모듈들을 번들링해준다는 것입니다. 정적인 모듈들은 정적 파일들을 의미한다고 볼 수 있겠습니다. 정적 파일이란 애플리케이션이 실행되면서 변경되지 않는 파일로, 자바스크립트, HTML, CSS 등의 파일을 의미합니다. 번들링이란 여러 파일들을 적은 개수의 파일로 묶는다는 의미입니다. 

 

Webpack 설정

Webpack에 대한 설정은 webpack.config.js에서 할 수 있습니다. 제가 사용한 설정은 다음과 같습니다.

 

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: 'HTML'
    })
  ]
}

• mode: 'development', 'production', 'none' 중 하나로 설정 가능합니다. 이 값을 통해 환경별 최적화를 활성화 할 수 있습니다. 우선 개발중이라 development로 해놨지만, 추후 환경변수를 통해 설정할 수 있도록 수정하도록 하겠습니다.
• entry: 의존성 그래프의 시작점인 모듈을 의미합니다. src 폴더에 index.js를 시작으로 번들링을 하게됩니다.
• output: 번들링된 결과물을 내보낼 위치입니다. clean 설정을 true로 해서 매 번들링시 폴더를 깔끔하게 비우고 시작하도록 설정합니다.
• resolve > alias: import시 모듈의 별칭을 만들기 위해 사용합니다. 여기서는 src 폴더의 별칭을 '@'으로 설정하여서 src 폴더에서 다른 모듈 import 시 'import A from '@/moduleA' 와 같은 식으로 작성할 수 있도록 하였습니다.
• module: 모듈을 처리하는 방법을 결정합니다. 여기서는 자바스크립트 파일들을 babel-loader를 사용해 자바스크립트 모듈을 바벨을 이용하여 트랜스파일링하도록 하였습니다. 바벨에 대해서는 이어서 알아보도록 하겠습니다.
• plugins: 플러그인은 다양한 방법으로 Webpack의 기능들을 추가해줍니다. 여기서는 HTMLWebpackPlugin을 사용하여 번들링시 번들링된 자바스크립트 파일을 script tag로 사용하는 HTML 파일을 생성하도록 합니다.

 

이 외에도 추가적으로 webpack-dev-server를 설치하여 개발 서버로써 사용합니다. webpack-dev-server를 사용하면 Hot Module Replacement 기능 덕분에 파일을 수정하고 저장하면 바로바로 변경 사항을 볼 수 있어서 개발시 편리합니다.

 

마무리

NPM, Webpack은 자바스크립트 프로젝트를 설정하는데에 가장 필수적인 요소입니다. 특히 Webpack은 react-create-app 이나 vue-cli와 같은 boilerplate들도 내부적으로 사용하기 때문에 시중에 있는 여러 번들링 도구중 가장 많이 사용된다고 볼 수 있습니다. 물론 두 도구 모두 다른 도구로 대체할 수 있습니다. 

• npm : yarn
• Webpack: browserify, Gulp, Parcel, Rollup

 

정리

• .npmrc 파일을 이용해 사용하는 노드 버전을 명시하자
• 자바스크립트에서의 '빌드'는 컴파일 언어에서의 의미와는 사뭇 다르다.
• Webpack의 설정은 복잡하지만, 잘 알아둘 필요가 있다.