Bagaimana cara menggabungkan skrip vendor secara terpisah dan membutuhkannya sesuai kebutuhan dengan Webpack?

Saya mencoba melakukan sesuatu yang saya yakini mungkin terjadi, tetapi saya benar-benar tidak mengerti bagaimana melakukannya hanya dari dokumentasi webpack.

Saya menulis perpustakaan JavaScript dengan beberapa modul yang mungkin atau tidak bergantung satu sama lain. Selain itu, jQuery digunakan oleh semua modul dan beberapa dari mereka mungkin memerlukan plugin jQuery. Pustaka ini kemudian akan digunakan pada beberapa situs web yang berbeda yang mungkin memerlukan beberapa atau semua modul.

Mendefinisikan dependensi antar modul saya sangat mudah, tetapi mendefinisikan dependensi pihak ketiga tampaknya lebih sulit dari yang saya harapkan.

Apa yang ingin saya capai : untuk setiap aplikasi saya ingin memiliki dua file bundel satu dengan dependensi pihak ketiga yang diperlukan dan lainnya dengan modul yang diperlukan dari perpustakaan saya.

Contoh : Mari kita bayangkan bahwa perpustakaan saya memiliki modul berikut:

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

Dan saya punya aplikasi (melihatnya sebagai file entri unik) yang membutuhkan modul a, b dan c. Webpack untuk kasus ini harus menghasilkan file berikut:

• bundel vendor : dengan jquery, jquery.plugin1 dan jquery.ui;
• bundel situs web : dengan modul a, b dan c;

Pada akhirnya, saya lebih suka memiliki jQuery sebagai global jadi saya tidak perlu meminta itu pada setiap file tunggal (misalnya, saya hanya memerlukannya pada file utama). Dan plugin jQuery hanya akan memperpanjang $ global seandainya diperlukan (itu tidak masalah jika tersedia untuk modul lain yang tidak membutuhkannya).

Dengan asumsi ini mungkin, apa yang akan menjadi contoh file konfigurasi webpack untuk kasus ini? Saya mencoba beberapa kombinasi loader, eksternal, dan plugin pada file konfigurasi saya, tetapi saya tidak benar-benar mendapatkan apa yang mereka lakukan dan mana yang harus saya gunakan. Terima kasih!

dalam file webpack.config.js (Versi 1,2,3) saya, saya punya

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

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

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

di array plugin saya

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

Sekarang saya memiliki file yang hanya menambahkan lib pihak ke tiga file seperti yang diperlukan.

Jika Anda ingin mendapatkan lebih banyak rincian tempat Anda memisahkan vendor dan file titik masuk Anda:

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

Perhatikan bahwa urutan plugin sangat penting.

Juga, ini akan berubah dalam versi 4. Ketika itu resmi, saya memperbarui jawaban ini.

Pembaruan: indexOf perubahan pencarian untuk pengguna windows

Saya tidak yakin apakah saya sepenuhnya memahami masalah Anda, tetapi karena saya memiliki masalah serupa baru-baru ini, saya akan mencoba membantu Anda.

Bundel vendor.

Anda harus menggunakan CommonsChunkPlugin untuk itu. dalam konfigurasi Anda menentukan nama chunk (eg vendor), dan nama file yang akan dihasilkan ( vendor.js).

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

Sekarang bagian penting, Anda sekarang harus menentukan apa artinya vendorperpustakaan dan Anda melakukannya di bagian entri. Satu item lagi ke daftar entri dengan nama yang sama dengan nama chunk yang baru dinyatakan (yaitu 'vendor' dalam kasus ini). Nilai entri itu haruslah daftar semua modul yang ingin Anda pindahkan ke vendorbundel. dalam kasus Anda akan terlihat seperti:

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

JQuery sebagai global

Punya masalah yang sama dan menyelesaikannya dengan ProvidPlugin . di sini Anda tidak mendefinisikan objek global tetapi semacam shurtcuts ke modul. yaitu Anda dapat mengkonfigurasinya seperti itu:

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

Dan sekarang Anda bisa menggunakan $di mana saja dalam kode Anda - webpack akan secara otomatis mengubahnya menjadi

require('jquery')

Saya harap ini membantu. Anda juga dapat melihat file konfigurasi webpack saya yaitu di sini

Saya suka webpack, tapi saya setuju bahwa dokumentasi itu bukan yang terbaik di dunia ... tapi hei .. orang-orang mengatakan hal yang sama tentang dokumentasi Angular pada awalnya :)

Edit:

Untuk mendapatkan potongan vendor khusus titik masuk, gunakan CommonsChunkPlugins beberapa kali:

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

dan kemudian mendeklarasikan pustaka extenral berbeda untuk file yang berbeda:

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

Jika beberapa perpustakaan tumpang tindih (dan sebagian besar dari mereka) antara titik masuk maka Anda dapat mengekstraknya ke file umum menggunakan plugin yang sama hanya dengan konfigurasi yang berbeda. Lihat contoh ini .

Jika Anda tertarik untuk menggabungkan skrip Anda secara terpisah dari skrip vendor:

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

Anda dapat membaca lebih lanjut tentang fitur ini di dokumentasi resmi .

Juga tidak yakin apakah saya sepenuhnya memahami kasus Anda, tetapi di sini potongan konfigurasi untuk membuat potongan vendor terpisah untuk masing-masing bundel Anda:

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

Dan tautan ke CommonsChunkPlugindokumen: http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin