[javascript] 웹팩에서 jQuery 플러그인 종속성 관리

내 응용 프로그램에서 Webpack을 사용하고 있는데 모든 JavaScript 파일 / 코드에 대해 bundle.js와 jQuery 및 React와 같은 모든 라이브러리에 대해 vendor.js라는 두 개의 진입 점을 만듭니다. jQuery를 종속 플러그인으로 사용하고 vendor.js에도 플러그인을 사용하려면 어떻게해야합니까? 해당 플러그인에 여러 종속성이있는 경우 어떻게합니까?

현재이 jQuery 플러그인을 사용하려고합니다-https: //github.com/mbklein/jquery-elastic . Webpack 문서에는 providePlugin 및 imports-loader가 언급 되어 있습니다. providePlugin을 사용했지만 여전히 jQuery 객체를 사용할 수 없습니다. 내 webpack.config.js의 모습은 다음과 같습니다.

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

그러나 그럼에도 불구하고 브라우저 콘솔에서 여전히 오류가 발생합니다.

잡히지 않은 ReferenceError : jQuery가 정의되지 않았습니다

마찬가지로 imports-loader를 사용하면 오류가 발생합니다.

요구가 정의되지 않았습니다 ‘

이 줄에 :

var jQuery = require("jquery")

그러나 vendor.js 파일에 플러그인을 추가하지 않고 다른 JavaScript 코드 파일을 포함하는 방법과 같이 일반적인 AMD 방식으로 필요할 때 동일한 플러그인을 사용할 수 있습니다.

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

그러나 jquery.elastic.source.js가 bundle.js의 JavaScript 코드와 함께 번들로 제공되고 모든 jQuery 플러그인이 vendor.js 번들에 포함되기를 원하기 때문에 이것은 내가하고 싶은 것이 아닙니다. 어떻게 이것을 달성 할 수 있습니까?

답변

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

var webpack = require("webpack");

    ...

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

 plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]

$ npm i jquery --save

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

npm install --save jquery@3.2.1

npm install expose-loader --save-dev

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

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

require('jquery');

window.$ = jQuery;

 var webpack = require("webpack");
 plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

$ npm i jquery --save

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});