[ Webpack ] Webapck 설정값 정리

webpack 설정 파일 정리

React를 사용하려고 웹팩을 쓰려하면 핵심 파일인 webapck.config.js파일의 설정값이.. 작성하려 할때마다 까먹는다..
자꾸 까먹다보니 자꾸 다시 검색을 하게되고... 악순환 그래서 각 속성들의 역할들을 정리 해놓는다.

package.json

먼저 package.json파일에 어떤 디펜더시가 들어가는지 확인해본다.

// packaage.json file
{
  "name": "Webpack Setting",
  "version": "1.0.0",
  "description": "Webpack Setting",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"
  },
  "author": "Junho Ryu",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9"
  }
}

scripts

  "scripts": {
    "dev": "webpack"
  },

터미널에서 npm run dev 및 npx webpack을 사용하면 webpack동작을 실행한다.

dependencies

react 이건뭐.. react의 core 코드가 담긴 패키지다.
react-dom 이것도 따로 써놓을 필요 없이 그냥 react-dom의 core 코드가 담긴 패키지다.
react, react-dom 이 두개는 react를 사용하기위한 필수 패키지임

devDependencies

@babel/core babel의 기본적인 동작 코드가 들어가있음
@babel/preset-env 알아서 해당 브라우저가 이해할수 있도록 최신문법을 옛날문법으로 변환해준다.
@babel/preset-react babel이 jsx문법을 읽을수 있도록 해준다.
@babel/plugin-proposal-class-properties jsx내에서도 class안에 state와 같이 여러 문법이 존재한다 이를 호환하기위해 설치
babel-loader babel과 webpack을 연결해준다.

webpack.config.js

const path = require('path');

module.exports = {
  name: 'Webpack Setting',
  mode: 'development',
  devtool: 'eval', 
  resolve: {
    extensions: ['.js', '.jsx']
  },
  entry: { 
    app: ['./index'],
  },
  module: {
    rules: [
        {
          test: /\.jsx?/, 
          loader: 'babel-loader', 
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: []
          }
        },
    ],
  },
  output: { 
    path: path.join(__dirname, 'dist'),
    filename: 'app.js'
  },
}

const path = require('path');

node에서 경로를 쉽게 조작 할 수 있도록 해준다. node가 설치되어 있다면, 자동으로 설치 되어있다.

module.exports = {
  name: 'Webpack Setting', // 이름
  mode: 'development', // 빌드 모드 -> 실서비스 : production
  devtool: 'eval', // 빌드 속도 빠르게 한다는 것 정도로 인식..
  resolve: {
    extensions: ['.js', '.jsx'] // entry 속성에 지정된 파일 확장자를 지정해준다. 
  },
  ...
}

module.exports = {
  ...
  entry: { // 입력 -> 어떤 파일로부터 webpack이 빌드를 시작할지 entry point를 지정하는 옵션
    app: ['./index'], // 시작 파일명, 배열로 여러개의 entry point를 지정할 수 있다.
  },
  ...
}

module.exports = {
  ...
  module: {
    rules: [ // 룰 적용 배열로 작성되어 여러개의 룰을 적용시켜 줄 수 있다.
      { 
        test: /\.jsx?/, // 룰을 적용 시킬 파일을 지정, 해당 정규식은 `js`,`jsx` 파일에 대해 적용 시키겠다는 정규식이다. 
        loader: 'babel-loader', // 최신문법을 이해하지 못하는 브라우저를 위해 바벨을 적용시켜  이전 문법으로 변환
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'], 
          //presets 옵션들을 넣어준다. 해당 패키지의 역할은 상단에 적어놓음
          plugins: []
          // babel관련 사용해야할 plugin이 존재한다면 넣어준다.

          // presets, plugins 속성들은 아래와같이 배열안에 또다시 배열을 넣어 상세 옵션 설정들이 가능하다.
          // ex) presets: [ ['@babel/preset-env', { targets: { browsers : [...] } }] ]
        }
      },
    ],
  },
  ...
}

module.exports = {
  ...
  output: { // 출력
    path: path.join(__dirname, 'dist'),
    // path.join() 함수를 실행하면 경로를 알아서 만들어준다, 
    // 현재 폴더의 실제경로는 C:\Users\유준호\Desktop\test\webpackSetting ... 이런 식으로 구성되어잇는데,
    // 이는 컴퓨터마다 환경도다르고 경로가 다를 수 있기 때문에 path.join() 함수를 사용하여,
    // 현재 webpack.confing.js 폴더 경로에 있는 dist폴더에 output을 내보낸다.
    filename: 'app.js' // 원하는 파일 name
  },
  ...
}