레거시 공급업체 모듈을 포함하기 위해 다양한 접근 방식을 혼합했습니다. 이 문제를 해결하는 방법은 다음과 같습니다:

1. 'dist`보다 미분화 CommonJS/AMD를 선호합니다.

대부분의 모듈은 package.json의 main 필드에 dist 버전을 링크합니다. 이는 대부분의 개발자에게 유용하지만, 웹팩의 경우 웹팩이 종속성을 더 잘 최적화할 수 있으므로 src 버전에 별칭을 지정하는 것이 좋습니다(예: DedupePlugin 사용 시).

// webpack.config.js

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

그러나 대부분의 경우 dist 버전도 잘 작동합니다.

2. 제공 플러그인`을 사용하여 암시적 전역 주입하기

대부분의 레거시 모듈은 jQuery 플러그인이 $ 또는 jQuery에서 하는 것처럼 특정 전역의 존재에 의존합니다. 이 시나리오에서는 웹팩이 $ 글로벌 식별자를 만날 때마다 var $ = require("jquery")를 앞에 붙이도록 구성할 수 있습니다.

var webpack = require("webpack");

    ...

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

3. 임포트-로더](https://github.com/webpack/imports-loader)를 사용하여 이것을 구성합니다.

일부 레거시 모듈은 이것이 창 객체에 의존합니다. 이는 모듈이 이것이 module.exports와 같은 CommonJS 컨텍스트에서 실행될 때 문제가 됩니다. 이 경우 imports-loader를 사용하여 this를 재정의할 수 있습니다.

npm i imports-loader --save-dev`를 실행한 다음

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

임포트-로더는 모든 종류의 변수를 수동으로 주입하는 데에도 사용할 수 있습니다. 하지만 대부분의 경우 암시적 전역에 관해서는 ProvidePlugin이 더 유용합니다.

4. 임포트 로더](https://github.com/webpack/imports-loader)를 사용하여 AMD를 비활성화합니다.

AMD, CommonJS, 레거시 등 다양한 모듈 스타일을 지원하는 모듈이 있습니다. 그러나 대부분의 경우 먼저 '정의'를 확인한 다음 몇 가지 기발한 코드를 사용하여 속성을 내보냅니다. 이러한 경우 define = false를 설정하여 CommonJS 경로를 강제로 사용하는 것이 도움이 될 수 있습니다.

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

5. 스크립트 로더](https://github.com/webpack/script-loader)를 사용하여 스크립트를 전역적으로 가져오기

전역 변수에 신경 쓰지 않고 레거시 스크립트만 작동하게 하려면 스크립트 로더를 사용할 수도 있습니다. 스크립트 로더는 `

jquery에 대한 전역 액세스의 경우 몇 가지 옵션이 있습니다. 가장 최근의 웹팩 프로젝트에서는 jquery에 대한 전역 액세스를 원했기 때문에 플러그인 선언에 다음을 추가했습니다:

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

그러면 JavaScript 소스 코드 내에서 전역 참조 $ 및 jQuery를 통해 jquery에 액세스할 수 있습니다.

물론 npm을 통해 jquery도 설치해야 합니다:

$ npm i jquery --save

이 접근 방식의 작동 예제를 보려면 github에서 내 앱을 포크하세요.

무엇을 하려는 것인지 잘 이해했는지는 모르겠지만, 전역 컨텍스트(창)에 있어야 하는 jQuery 플러그인을 사용해야 했고, 제 entry.js에 다음과 같은 내용을 넣었습니다:

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

내가 원하는 곳에 jqueryplugin.min.js와 window.$를 요구하면 예상대로 플러그인이 확장됩니다.

나는 attaboy 창조하셨노 작업 중에 있는 것과 동시에 '$' 와 '다음' 으로 웹팩 3.8.1 전역 변수를 포함한다.

Jquery 설치 프로젝트로 상관 관계. 최신 버전을 설치 '를 지정할 수 있습니다' @3.2.1 생략하십시오 또는 다른 버전.

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'
    })
  ]
}

• In your 웹팩스콘피g.j스 below:* 파일 추가

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

• Npm:* jQuery 를 사용하여

$ npm i jquery --save

• 아프자이스 lines:* 아래에 있는 파일 추가

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

이 협력했습니다 for me. )

이 추가 어레이입니다 웹팩스콘피g.j스 데이터베이스에구성원을 플러그인

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

jquery 일반적으로 다음 합니다.

require('jquery');

갈수록 통증이 계속될 경우 다른 스크립트를 통해 명시적으로 그것을 볼 수 있는 글로벌 컨텍스트로 배치하여, 시도하시겠습니까 (flash. 초급형 js)

window.$ = jQuery;

하지만 그들 중 아무도 답을 찾았다 일부 제공된 것 같다 "고 쓰고 있다. 그럼 이 했다.

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

39 m I& 버전에 상관 없이 작동합니까 사용하는 것으로 보인다.

이 기능은 in 웹팩 3:

웹팩스콘피g. 바베라자이스 있는 파일:

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

• • 프로비데플루긴 및 사용

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

39, ve I& 최상의 솔루션을 찾을 수 없었다.

issuecomment-283634059 https://github.com/angular/angular-cli/issues/5139

기본적으로 포함해야 합니다 변수를 티핑sd츠 더미 (dummy) 에서 & # 39, 달러 정도로, &quot 분리하십시오 가져오기의 * jquery"; jquery 스크립트입니다 코드에서 후 수동으로 태그 추가 데이터베이스에구성원을 hba1-spa html. 이런 식으로 웹팩 won& # 39, t be in your way, 진실이며당신이 액세스하려면 jQuery 같은 글로벌 기업의 모든 변수가 스크립트에만 있어야 합니다.

이 방법은 웹팩스콘피g.j스 날

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

또 다른 자바스크립트 붙여넣거나 HTML 추가:

global.jQuery = require('jquery');

편집: 가끔 들러 간단히 사용할 웹팩 모듈로 구성된 간단한 웹 프로젝트 - 자신의 코드를 유지하기 위한. 다음 솔루션은 분들을 위해 외부 라이브러리에 그냥 사용하지 않고 그들의 예상대로 많은 시간을 작업할 수 있는 모듈 - 다루기 웹팩 셋업을. (편집됩니다 이후 - 1)

만약 당신이 (es6) 솔루션을 빠르고 쉽게 벗어나지 못하고 있거나 예방하려면 externals 구성 / 추가 웹팩 플러그인에는 구성:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

내부의 모듈:

const { jQuery: $, Underscore: _, etc } = window;