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

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