Webpack dev server를 첫 가동하기 위한 여정

해결이 완전히 된 건 아니지만

이번에 고민한 것을 아래에 남겨보자.

// package.json
 
"dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
},
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react-hot-loader": "^4.1.2",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
}

위에 보는 것처럼 2018년 4월 30일 기준으로

webpack과 react 모두 최신 버전이다.

그래서 많은 자료에 나와있는 가이드대로 진행하기에 무리가 많다.

1. 경로 이슈

우선 버전과 관련없는 사항부터 얘기하자면

경로에 대한 실수는 어느 개발 과정에도 자주 등장한다.

// webpack.config.js
 
module.exports = {
    entry: './src/index.js'
    // 생략
}

실제 index.js가 이 root 기준으로 저 위치가 맞는지 체크가 필요하다.

2. rules와 babel-loader

먼저 module 아래에 작성할 때 과거에는 loaders를 기재했지만

지금은 rules를 써야한다.

과거 version의 가이드에서는 loader 자리에 'babel'만 작성하는 경우가 있다.

하지만 현재 시점에서는 'babel-loader'로 작성해야 동작이 된다.

// webpack.config.js
 
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }

3. performance와 mode

현재 버전에서는 performance와 mode가 생겼다. 과거에는 없던 옵션이다.

이 두가지가 세팅이 되지 않아도 컴파일은 잘 된다.

하지만 warning은 보기 좋지 않으니깐.

// webpack.config.js
 
module.exports = {
    // 생략
        performance: {
            hints: false
        }
    // 생략
}

// package.json
{
// 생략
  "scripts": {
    "dev-server": "webpack-dev-server --mode development"
  },
// 생략
}

그 외 참고하고 있는 자료들

- Webpack document

- 김정환 블로그