공급업체 스크립트를 별도로 묶어서 웹팩에 필요에 따라 필요한 경우 어떻게 해야 합니까?

공급업체 스크립트를 별도로 묶어서 웹팩에 필요에 따라 필요한 경우 어떻게 해야 합니까?

저는 가능해야 한다고 생각하는 일을 하려고 노력하고 있지만 웹팩 문서만으로는 어떻게 해야 하는지 정말 이해할 수 없습니다.

저는 서로 의존할 수도 있고 그렇지 않을 수도 있는 여러 모듈로 자바스크립트 라이브러리를 작성하고 있습니다.여기에 jQuery는 모든 모듈에서 사용되며 일부 모듈은 jQuery 플러그인이 필요할 수 있습니다.그러면 이 라이브러리는 일부 또는 모든 모듈이 필요한 여러 다른 웹 사이트에서 사용됩니다.

모듈 간의 종속성을 정의하는 것은 매우 쉬웠지만 타사의 종속성을 정의하는 것은 예상보다 어려운 것 같습니다.

제가 이루고 싶은 것은 각 앱에 대해 필요한 타사 종속성이 있는 번들 파일 2개와 라이브러리에서 필요한 모듈이 있는 번들 파일 2개를 원합니다.

예:내 라이브러리에 다음과 같은 모듈이 있다고 가정해 보겠습니다.

• a (requires: jquery, jquery.plugin1)
• b (requires: jquery, a)
• c (requires: jquery, jquery.ui, a, b)
• d (requires: jquery, jquery. plugin2, a)

그리고 모듈 a, b, c가 필요한 앱이 있습니다.이 경우의 웹팩은 다음 파일을 생성해야 합니다.

• 벤더 번들: jquery, jquery. plugin1 및 jquery.ui;
• 웹사이트 번들: 모듈 a, b 및 c 포함;

결국, 저는 jQuery를 모든 파일에 요구할 필요가 없도록 글로벌로 보유하고 싶습니다(예를 들어 메인 파일에서만 요구할 수 있습니다).그리고 jQuery 플러그인은 필요한 경우에 대비하여 $global을 확장할 것입니다(필요하지 않은 다른 모듈에서 사용할 수 있다면 문제가 되지 않습니다).

이것이 가능하다고 가정할 때, 이 경우에 대한 웹팩 구성 파일의 예는 무엇입니까?구성 파일에 로더, 외부 및 플러그인의 여러 조합을 시도해 보았지만 무엇을 하고 어떤 것을 사용해야 하는지 잘 모르겠습니다.감사해요!

내 webpack.config.js (버전 1,2,3) 파일에서, 나는

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

플러그인 배열로

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

이제 필요에 따라 하나의 파일에 서드파티 립만 추가하는 파일이 있습니다.

공급업체와 진입점 파일을 분리할 때 보다 세분화된 작업을 수행하려면 다음과 같이 하십시오.

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

플러그인의 순서가 매우 중요합니다.

또한 버전 4에서는 이것이 바뀔 예정입니다.공식적인 답변이 나오면 이 답변을 업데이트하겠습니다.

업데이트: 윈도우 사용자에 대한 검색 변경 지수

제가 당신의 문제를 충분히 이해할 수 있을지 모르겠지만, 최근에 비슷한 문제가 있었으므로 제가 도와드리겠습니다.

벤더 번들.

커먼즈 청크플러그를 사용해야 합니다.청크의 이름을 지정합니다(예: 청크).vendor, 및 생성할 파일 이름()vendor.js).

new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),

이제 중요한 부분입니다. 무엇을 의미하는지를 지정해야 합니다.vendor도서관과 당신은 입구에서 그것을 합니다.새로 선언된 청크의 이름과 동일한 이름(즉, 이 경우 '벤더')으로 엔트리 리스트에 항목 하나를 더 추가합니다.해당 항목의 값은 이동하려는 모든 모듈의 목록이어야 합니다.vendor보따리로 묶다당신의 경우 다음과 같이 보여야 합니다.

entry: {
    app: 'entry.js',
    vendor: ['jquery', 'jquery.plugin1']
}

JQuery as global

동일한 문제를 가지고 ProvidPlugin으로 해결했습니다.여기서 전역 객체를 정의하는 것이 아니라 모듈에 대한 일종의 차단입니다. 즉, 다음과 같이 구성할 수 있습니다.

new webpack.ProvidePlugin({
    $: "jquery"
})

그리고 이제 당신은 사용할 수 있습니다.$당신의 코드의 어디든 - 웹팩은 그것을 자동적으로 변환할 것입니다.

require('jquery')

도움이 됐기를 바랍니다.당신은 또한 여기에 있는 나의 웹팩 구성 파일을 볼 수 있습니다.

저는 웹팩을 좋아하지만, 그 문서가 세상에서 가장 좋은 문서는 아니라는 것에 동의합니다.하지만 이봐..사람들은 처음에 Angular documentation에 대해 같은 말을 했습니다 :)

---

편집:

엔트리포인트별 벤더 청크를 사용하려면 CommonsChunkPlugins를 여러 번 사용해야 합니다.

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity),

그런 다음 여러 파일에 대해 여러 확장 라이브러리를 선언합니다.

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery'
    ]
},

일부 라이브러리가 엔트리 포인트 간에 중복(대부분의 라이브러리)되어 있으면 구성이 다른 동일한 플러그인을 사용하여 공통 파일로 추출할 수 있습니다.이 예를 참조하십시오.

공급업체 스크립트와 별도로 스크립트를 자동으로 번들링하는 경우:

var webpack = require('webpack'),
    pkg     = require('./package.json'),  //loads npm config file
    html    = require('html-webpack-plugin');

module.exports = {
  context : __dirname + '/app',
  entry   : {
    app     : __dirname + '/app/index.js',
    vendor  : Object.keys(pkg.dependencies) //get npm vendors deps from config
  },
  output  : {
    path      : __dirname + '/dist',
    filename  : 'app.min-[hash:6].js'
  },
  plugins: [
    //Finally add this line to bundle the vendor code separately
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
    new html({template : __dirname + '/app/index.html'})
  ]
};

이 기능에 대한 자세한 내용은 공식 문서에서 확인할 수 있습니다.

또한 귀사의 사례를 완전히 이해했는지는 모르겠지만, 각 번들에 대해 별도의 벤더 청크를 생성하기 위한 구성 스니펫이 있습니다.

entry: {
  bundle1: './build/bundles/bundle1.js',
  bundle2: './build/bundles/bundle2.js',
  'vendor-bundle1': [
    'react',
    'react-router'
  ],
  'vendor-bundle2': [
    'react',
    'react-router',
    'flummox',
    'immutable'
  ]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle1',
    chunks: ['bundle1'],
    filename: 'vendor-bundle1.js',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle2',
    chunks: ['bundle2'],
    filename: 'vendor-bundle2-whatever.js',
    minChunks: Infinity
  }),
]

링크를 연결합니다.CommonsChunkPlugin문서: http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

언급URL : https://stackoverflow.com/questions/30329337/how-to-bundle-vendor-scripts-separately-and-require-them-as-needed-with-webpack