Webpack - Webpack.config.json'da Komut Dosyası Yükleyicisini Kullanma

Question

Ayak parmaklarımı webpack dünyasına sokmaya başlıyorum. Harika Vue.js'yi vueify ile kullanıyorum, bu yüzden modüllerim ES6.

Tek bir zorluk, bazı üçüncü taraf jQuery eklentileri yüklemektir. JQuery yüklemek için ProvidePlugin kullanıyorum - hangi iyi çalışır.

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

Misc jQuery eklentileri içeren eklentiler adlı bir dizinim var. Anladığım kadarıyla, betik yükleyici bunları paketlenmiş dosyaya yalnızca dizeler halinde yükler ve paket yüklendiğinde değerlendirilir. Bu komut dosyaları, normal bir komut dosyası etiketine yüklendikleri gibi kullanılabilir (yani, içe aktarma gerektirmez).

Ancak, çalışmak için eklentilerden herhangi birini alamıyorum. Aşağıda yükleyiciler dizim. Ne yapıyorum (ya da yapmamak)? Ben WebPack ile çalışmak için jQuery eklentileri alma zorluğu yakınlık sen lib yolu

Answer 1

new webpack.ProvidePlugin({ 
    'React': path.resolve(__dirname, "node_modules/react/react"), 
    'ReactDOM': path.resolve(__dirname, "node_modules/react-dom/dist/react-dom"), 
    "jQuery": path.resolve(__dirname, "node_modules/jquery/dist/jquery"), 
    "$": path.resolve(__dirname, "node_modules/jquery/dist/jquery") 
}) 

çözmek. Bu özel yapılandırmaya yönelik bir çözümüm olmamasına rağmen, daha fazla sorun giderme işlemi gerçekleştirilinceye kadar, geliştirilmeyi devam ettirmek için bir cdn kullanmanın yararlı olduğunu buldum. Aşağıda bir örnek. senin .html şablon dosyasında

: index.js olarak

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 

ya da her türlü ana giriş noktası şudur: webpack konfigürasyonunda

import $ from 'jquery' 

:

externals: { 
    jquery: 'jQuery' 
} 

yana Bu yaklaşım, daha geçici olarak çalışan ve daha geçici bir şekilde çalışabilecek olan script etiketlerinin doğrudan kullanımını gerektirir. optimizasyon ve paketleme için.

Answer 2

loaders: [ 

     // process *.vue files using vue-loader 
     { 
      test: /\.vue$/, 
      loader: 'vue' 
     }, 
     // process *.js files using babel-loader 
     // the exclude pattern is important so that we don't 
     // apply babel transform to all the dependencies! 
     { 
      test: /\.js$/, 
      loader: 'babel', 
      exclude: /node_modules/ 
     }, 
     { 
      test: /plugins\.js$/, 
      loader: 'script-loader' #tried script too 
     } 

    ]