개요

타이틀적인 일을 하면 빠졌지만 최종적으로 할 수 있었기 때문에 정리해 보았다.

경위

Vuetify 빠른 시작 가이드 에 이하와 같은 기술이 있어, 자신의 vue init webpack으로 작성한 프로젝트를 확인하면 webpack3계로 만들어지고 있었다.

트리 쉐이킹에 vuetify-loader를 사용하는 경우 Webpack 버전 >=4인지 확인하십시오.

다양한 버전

vue: 2.5.22 -> 2.6.11

vue-cli: 3.3.0

webpack: 3.12.0 -> 4.41.6

마이그레이션 절차

종속성 업데이트

여기 를 참고로 하였습니다.

소스 코드 편집

상기의 링크에도 기재가 있었습니다만, 보다 상세한 것을 알기 쉬웠기 때문에 여기 를 참고로 하겠습니다.

개별적으로 한 일

상기를 실시했을 때에, 왠지 webpack-dev-server의 버젼만 오르지 않았기 때문에, 우선 npm isntall --save-dev webpack@latest 했다.

빠진 사촌

위의 마이그레이션 절차를 완료, npm run build 성공적으로 성공.
다음은 npm run dev 로 로컬 동작 확인을, 라고 생각하면 dev 서버는 서도 브라우저에 이하의 에러가 나와 화면은 묘화되지 않는다. . .

우선 구구하면 이런 기사 글쎄, 그렇게 잘 모르겠다 ...

해결

오로지 계속해서 같은 사건의 이슈에게 다음 코멘트를 발견하십시오.

use [email protected] instead of 3.9.0 solved the problem

어? 그러고 보니 조금 webpack-dev-server를 적당히 최신화했다…

package.json

    "webpack-dev-server": "^3.10.3"

역시.npm isntall --save-dev [email protected] 해보자.

package.json

    "webpack-dev-server": "^3.５.１"

npm run dev 실행

오, 할 수 있었다! (화면도 그려졌다)

그런 이유로 일단 webpack3 -> webpack4의 이행은 완료. Vuetify 배포로 돌아갑니다.

참고문헌

vue init webpack으로 만든 프로젝트를 webpack4로 마이그레이션

Vue CLI 2 시스템에서 webpack3에서 webpack4로 마이그레이션 절차

Vue.js 앱의 webpack 버전을 4로 올렸습니다.

Webpack 4에서 Cannot assign to read only property 'exports' of object 오류

Cannot assign to read only property 'exports' of object '#' #2010