[Babel/Webpack] Webpack 3 -> Webpack 4 와 Babel 6 -> Babel 7에서의 주의사항

일단 기본적으로 에러가 겁나 많이 난다.

그래도 당황하지 않고 하나 둘 해나가다 보면 언젠간 에러는 잡히는 듯..

.babelrc의 preset확인

Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: Cannot read property ‘bindings’ of null 에러

우선 .babelrc 의 preset부터 체크. babel 7부터는 preset-es2015머시기.. 이런거 없다. 전부 @babel/preset-env로 통일

리엑트까지 쓴다면

{
  "presets": ["@babel/preset-env",
    "@babel/preset-react"]
}

위와 같이 쓰면됨.

패키지는 내 기준

"devDependencies": {
  "@babel/core": "^7.2.0",
  "@babel/preset-env": "^7.2.0",
  "@babel/preset-react": "^7.0.0",
  "babel-loader": "^8.0.4",
  "babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3"
}

이정도… 참고로 저 rest-spread도 beta더라도 안해주면 ReferenceError: unknown node of type “SpreadProperty” with constructor “Node” 에러난다.

클래스 내에서 state선언 -> Constructor로 빼기

이건 확실한지는 모르겠지만

클래스 내에서 state선언하는, 예컨데

class Test extends Component{
   state = {
     isButtonClick: false,
   }; // 이런거
}

이런거 없어져서 전부 constructor에다가 넣어줘야한다. (확실하진 않다. 나는 이거때문에 에러 발생)

ExtractTextPlugin

얘가 좀 골때리는데, 기존에 new ExtractTextPlugin이런 방식으로 하면 Deprecated에러가 난다.

나는

optimization: {
  splitChunks: {
    name: true,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
},

이런식으로 처리함.

Module parse failed: Unexpected token m in JSON at position 0 while parsing near ‘module.exports = “{\…’
You may need an appropriate loader to handle this file type.

기존에 json파일 로딩에 잘 쓰던 json-loader 도 위와 같은 에러가 난다.

이 경우, 그냥 webpack.config.js 에서 json-loader관련 부분을 삭제해주면 된다.

,
{
  test: /\.json$/,
  loader: "json-loader"
}