WEBPACK5_웹팩..ERROR...그만...

JSkim·2022년 7월 22일

오늘은 웹팩을 공부하면서 마주친 오류 몇개를 써보고자 한다.
나중에 웹팩 튜토리얼 포스팅도 올려야지

암튼 웹팩...처음 세팅하는데 이거이거..
오류가..
하..

내가 하려던 작업은 기존 프로젝트를 웹팩으로 최적화 시키는 작업이다.

(thml,css,js)

JS파일들 통합 시키던중 마주친 오류

Correct way of adding wow.js to symfony webpack encore

wow.js 라는 라이브러리를 사용중인데 웹팩으로 통합시키면서 저런 오류를 뱉는다.

  • 해결법:
import WOW from './js/wow.min';
window.WOW = WOW;

$( document ).ready(function() {
    new WOW().init();
});

이렇게 사용하면 된다. import 부분은 기존에 사용하던 wow.js 파일 위치를 지정해주자.

$(...).slick is not a function. The solution from other issues doesn't work.

이건 slick 사용하면서 뜨는 오류인데 이건 아마 jquery 중복으로 로드해서 생겼던 문제였던 것 같다. 암튼

  • 해결법:
import $ from 'jquery';
window.$ = window.jQuery = $;
import './js/slick';

이런식으로 jquery를 npm instll jquery@사용하는버전

해서 설치한 후

import 해주고 window.$ = window.jQuery = $;
하면 기존에 사용하던 slick을 불러와도 오류 없이 잘 실행되는 모습을 볼 수 있었다.

해결법이라고 해도 나는 이렇게 해결 했었다 정도이고 다른분들도 같은 오류를 이렇게 해결할 수 있을지는 모르겠다...워낙 충돌이 많아서...

처음부터 웹팩 설정하고 만든 프로젝트가 아니라 누가 만들어놓은 프로젝트에 적용시키는거라
탈이 많은것 같다. 오늘도 스택오버플로우의 도움을 받아 하나씩 해결해 나간다.

그리고 jquery는 누가 써놓은 프로젝트 받은거라 보고있긴한데
개발 실력이나 미래를 위해서는 최대한 안쓰는게 좋다더라(그래도 편하긴 하더라)

그래서 추가적으로 내가 개발해야하는 부분은 최대한 순수 자바스크립트로 개발하려고 노력중이다.

레거시 자료들을 파악할 수 있는 능력 조금 생기는것같아서 나쁘진 않다.

profile
제주도 프론트앤드 개발자의 개발 일기

0개의 댓글