WebPack 3.0 에서 4.0 변경시 오류들

다 해결했었는데 비슷한거 또 하다 보니.. 정리해둠..

본인 기준이라 100% 정확하지는 않음 처리 하면서 작성한것이 아니라 일부 누락됨.

npm 업데이트부터 빠짐없이 필요. 

webpack만 딸랑 하면 안되고 4.0에 의존되는것들도 업데이트가 필요함.

4.0기준 플러그인들이 사라지거나 호환되지 않는 문제들도 있다.  아래 링크에서 확인해서 삭제하거나 대체 필요

https://webpack.js.org/plugins/

module.exports = {

...

mode:'production', // or development

...

}

#문제 

 htmlWebPackPlugin.getHooks is not a function  

callback is not a function

this.htmlWebpackPlugin.getHooks is not a function

#해결

InterpolateHtmlPlugin 가 HtmlWebpackPlugin 보다 뒤에 오도록 변경

InterpolateHtmlPlugin 첫번째 인자로 HtmlWebpackPlugin 추가

4.0 버전을 설치

npm install --save-dev html-webpack-plugin@next 

new HtmlWebpackPlugin({...})

new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),

#문제 

Cannot find module 'xxx'

Cannot find module 'xxx-webpack-plugin'

#해결

저건 모듈이 없는 에러 인데 모듈 설치..

#문제 

Module build Failed

#해결

4.0과 안되는 모듈은 삭제하고 대체 모듈을 찾아보자.

https://webpack.js.org/plugins/

예) jslint > eslint-loader2.x

아래것들 다 지우자.. 

webpack-manifest-plugin

extract-text-webpack-plugin

sw-precache-webpack-plugin

extract-text-webpack-plugin 는 mini-css-extract-plugin으로 대체 

css 압축 optimize-css-assets-webpack-plugin

js 압축 인듯.. uglifyjs-webpack-plugin

#문제 

테스트 서버 돌려볼려서 ie 테스트 할대 WebpackHotUpdate 없다는 문제

#해결

옵션 multiStep:true 추가

new webpack.HotModuleReplacementPlugin() // 기존

new webpack.HotModuleReplacementPlugin({

multiStep: true,

}),