Archives
11-24 23:50
Today
0
Total
287,672
관리 메뉴

FILife

[webpack] blueimp-fileupload jquery plugin 사용하기 본문

내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

[webpack] blueimp-fileupload jquery plugin 사용하기

FIL 2018. 7. 31. 17:03
728x90

blueimp-fileupload 플러그인이 webpack과 의존성 충돌이 발생하여 이것과 jquery, jquery-ui 등을 별도로 사용했었다.


오랜만에 생각이 나 구글을 다시 뒤져보니 해법이 있었다.


1. script-loader 설치


> npm install --save-dev script-loader


2. 기존 페이지 내의 <script> 태그를 제거하고, 해당 플러그인이 사용되는 js에 다음과 같이 import 시킨다.


require('script-loader!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
require('script-loader!blueimp-tmpl/js/tmpl.js');
require('script-loader!blueimp-load-image/js/load-image.all.min.js');
require('script-loader!blueimp-canvas-to-blob/js/canvas-to-blob.js');
require('script-loader!blueimp-file-upload/js/jquery.iframe-transport.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-process.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-image.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-audio.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-video.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-validate.js');
require('script-loader!blueimp-file-upload/js/jquery.fileupload-ui.js');

브라우저 콘솔에 jQuery가 undefined 라고 오류가 출력되면, $를 import 한 다음 줄에 아래와 같이 대입해준다.


window.jQuery = $;


이후 오류메시지를 확인하여 불필요한 <script>와 <link> 태그를 제거 해 주면 된다.




출처: https://stackoverflow.com/questions/44187714/import-blueimp-jquery-file-upload-in-webpack#48236429

0 Comments
댓글쓰기 폼