웹팩을 이용하여 2개의 jQuery 를 사용하는 방법을 알아보겠습니다.

우선 웹팩을 설치해주세요.

웹팩 설치

$ mkdir webpack-jquery-multi
$ cd webpack-jquery-multi
$ npm init -y
$ npm install webpack webpack-cli --save-dev

디렉토리 구조

초기 디렉토리 구조는 아래와 같습니다.

➜  webpack-jquery-multi tree -L 1
├── node_modules
├── package-lock.json
└── package.json

다음으로 테스트용 html, js 파일을 만들어주세요.

index.html, index.js 파일 생성

$ touch index.html
$ mkdir src
$ touch src/index.js

그리고 에디터로 index.html, index.js 파일을 열어 아래와 같이 코드를 작성해주세요.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multiple jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"></head>
    <body>
        Show console log..!
    </body>
</html>

index.js

$(function () {
    console.log($.fn.jquery);
});

jQueryNew(function () {
    console.log(jQueryNew.fn.jquery);
});

index.js 파일에는 두가지 버전의 jQuery($, jQueryNew)를 함께 사용하는 코드가 작성되어있습니다.

이제 이 코드가 정상적으로 실행이가능하도록 웹팩을 설정해보겠습니다.

webpack.config.js

설정 파일에 아래처럼 코드를 작성해주세요.

const path = require('path');
const webpack = require('webpack');

const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js',
    },
    resolve: {
        alias: {
            jquery: path.resolve(__dirname, 'src/js/jquery-1.12.4.js'),
            jqueryNew: path.resolve(__dirname, 'src/js/jquery-2.2.4.js'),
        }
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Development',
            template: path.join(__dirname, 'src/index.html'),
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            jQueryNew: 'jqueryNew',
            Popper: 'popper.js'
        }),
    ],
};

복잡해 보이네요. 😨 차근차근 살펴보겠습니다.

우선 모듈들을 번들화해주기 위해 path와 webpack 그리고 번들 파일들을 생성하기 위한 플러그인들을 사용해야하므로

아래 플러그인들을 설치해주세요.

$ npm install --save-dev clean-webpack-plugin
$ npm install --save-dev html-webpack-plugin
- clean-webpack-plugin: 번들파일이 생성되기 전에 대상 폴더의 파일 삭제
- html-webpack-plugin: bundle을 포함한 html 파일을 자동으로 생성

자세한 플러그인의 사용법은 해당 플러그인의 메뉴얼을 참고해주세요.

이제 두가지 버전의 jQuery를 사용하기 위한 설정을 살펴볼텐데요.

우선 살펴볼 설정은 resolve의 alias 입니다.
resolve는 모듈을 찾는 방법에 관한 설정이며 alias는 특정 경로의 별칭을 만들어주는 설정입니다.

예를들어 alias: { jquery: ‘./js/jquery-version-1.js’ } 로 설정하고
코드상에서 jquery를 사용하기위해 import ‘jquery’; 또는 require(‘jquery’); 를 했을경우 

원래대로라면 node_modules 디렉토리에서 찾겠지만, jquery를 alias로 설정해주었으므로 node_modules 가 아닌 ./js/jquery-version-1.js 파일을 불러오게됩니다.

즉, npm 으로 설치하지 않고 별도로 다운로드한 jQuery 파일을 jQuery, jQueryNew로 import 또는 require 할 수 있게 해줍니다.

다음으로는 alias 설정으로 jQuery를 특정 경로에서 찾을 수 있도록 해주었으므로
해당 파일들을 불러와(import) 특정 변수로 할당해서 전역적으로 사용할 수 있게 해주겠습니다.

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery',
  jQueryNew: 'jqueryNew',
}),

ProvidePlugin 은 특정 모듈을 전역으로 import 또는 require 를 한것처럼 만들어줍니다.

즉, 모든 파일(전역)에서 $, jquery, jQuery, jQueryNew 변수를 사용할 수 있게 됩니다.

이렇게 되면 기존코드는 jQuery 변수를 그대로 사용하고, 
새로운 버전의 코드를 사용해야하는 경우 jQueryNew라는 변수를 사용할 수 있게 되었습니다.

그리고 이제 사용하길 원하는 jQuery 파일들을 아래 구조처럼 src/js 폴더에 넣어주세요.
( ⚠️ jquery 버전이 예시와 다를 경우 alias 설정의 파일명도 동일하게 변경해주세요. )

➜  webpack-demo tree -I node_modules
├── dist
│   ├── app.bundle.js
│   ├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── index.html
│   ├── index.js
│   └── js
│       ├── jquery-1.12.4.js
│       ├── jquery-2.2.4.js
└── webpack.config.js

파일을 모두 디렉토리에 위치시킨 후 
npm run build 명령어를 실행하면 위와 같이 dist 파일에 app.bundle.js 와 index.html 이 만들어지게 됩니다.

그리고 dist/index.html 파일을 웹브라우저로 열어서 console log 를 확인해보시면 
아래처럼 각 jQuery 코드가 실행됨을 확인하실 수  있습니다.

jquery versions

감사합니다. 😁