[webpack] 오래된 글을 보고 웹팩 설정을 하다가 바뀐 부분이 많아 고생했던 일

벨로퍼트님의 블로그( https://velopert.com/1492 )를 보고 일부 babel 및 webpack 설정을 하다가 업데이트되어 바뀐 부분이 너무 많아서 웹팩으로 컴파일이 안되서 한참 고생했다. 그래서 바뀐 부분을 정리해 보고자 한다.

babel

babel-cli , babel-core , babel-preset-es2015 , babel-preset-react 는 더 이상 쓰지 않는게 좋은 듯하다. 웹팩 컴파일에 경고나 오류같은 것이 떴고, 찾아보니 더이상 안쓴다는 말이 있었다. 이것들은 @babel/cli  , @babel/core  , @babel/preset-env (이거는 babel 홈페이지에 보면 babel-preset-2015, 2016, 2017 등을 대신 한다고 나와있다. 이게 편하다 나는.), @babel/preset-react 로 바꾸면 된다. 앞의 babel은 결정적으로 버전이 낮다 6.26.3 인가? 가 최신이었는데 7.0.0을 요구하는 것이 있었다. 

# package.json

{

"name": "express-project",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"express": "^4.16.4",

"react": "^16.6.3",

"react-dom": "^16.6.3",

"webpack-cli": "^3.1.2"

},

"devDependencies": {

"@babel/cli": "^7.1.5",

"@babel/core": "^7.1.6",

"@babel/preset-env": "^7.1.6",

"@babel/preset-react": "^7.0.0",

"babel-loader": "^8.0.4",

"react-hot-loader": "^4.3.12",

"webpack": "^4.25.1",

"webpack-dev-server": "^3.1.10"

}

}

# .babelrc

{

"presets": ["es2015"]

}

이 설정은 이렇게 바꾸기를 추천한다.

{

"presets": [

"@babel/preset-env",

"@babel/preset-react"

]

}

webpack

# webpack.config.js

이랬던 웹팩 설정을

module: {

loaders: [

{

test: /\.js$/,

loader: 'babel',

exclude: /node_modules/,

query: {

cacheDirectory: true,

presets: ['es2015', 'react']

}

}

]

}

웹팩은 이렇게.  presets 부분을 고쳐 주어야한다. @babel/env 부분이 es6를 컴파일할 수 있게 해주는 설정인 것같다. 그리고 원래 rules 부분은 loaders로 되어있었는데, 바뀌었다.

module: {

rules: [

{

test: /\.js$/,

loader: "babel-loader",

exclude: /node_modules/,

query: {

cacheDirectory: true,

presets: ["@babel/react", "@babel/env"]

}

}

]

},

이렇게 하고나서야 비로소 webpack 컴파일을 할 수 있게 되었다. 그런데, babel의 transpile이 안된다. 자꾸 오류가 뜨는데 7.0.0.이상의 버전이 필요하다는데, 분명히 깔려는 있다. 근데 오류를 보니, 자꾸 6.26.3을 불러온다고 한다. 이건 아직 해결을 못했다. 해결하고 난 뒤에 글 수정해야겠다. 틀리거나 이상한 게 있다면 과감한 지적 부탁드립니다!

* 오래된 포스트는 다른 곳에서 찾아보는 게 낫다.