Webpack代碼拆分與庫目標

我有一個Web應用程序誰（客戶端）javascript寫入es6與主入口點app.js。Webpack代碼拆分與庫目標

我可以使用webpack捆綁它，或者在外部引用像jQuery這樣的供應商庫，或者將它們包含在捆綁包中 - 這取決於首選項。爲了讓它在瀏覽器中正常工作，我必須指定libraryTarget和library像這樣：

//snip 
entry: { 
    "app.bundle": ["./app.js"], 
}, 
output: { 
    path: path.join(__dirname, "wwwroot\\js"), 
    filename: "[name].js", 
    libraryTarget: "var", 
    library: "app" 
} 
//snip

不過我倒是喜歡到有我的供應商庫分開綁紮。

我可以使用CommonsChunkPlugin來做到這一點，但它似乎並沒有很好地與library*屬性一起使用，因爲它們也適用於它。即我最終與app.jQuery而不僅僅是jQuery

如何分離出我的供應商代碼並提供適當的全局變量來滿足他們的任何需求，同時也正確地將我的應用程序代碼暴露給瀏覽器？

webpack.config這裏：

var path = require('path'), 
    webpack = require('webpack'); 

module.exports = { 
    context: path.join(__dirname, 'wwwroot'), 
    entry: { 
     "app.bundle": ['./js/app.js'], 
     "vendor.bundle": ['jquery', 'jquery-validation', 'jquery-validation-unobtrusive'] 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot\\js'), 
     filename: '[name].js', 
     libraryTarget: 'var', 
     library: 'app' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /.jsx?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'stage-0'] 
       } 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['*', '.js'] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor.bundle', 
      minChunks: Infinity 
     }), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery' 
     }) 
    ] 
}

來源

2017-07-06 JamesT

如果外部提供您的jQuery插件，你正在開發一個圖書館，我建議使用externals而不是ProvidePlugin。這意味着當你測試你的捆綁庫時，你將不得不明確地提供jQuery。在這裏你測試你的捆綁庫

外部對象

externals: { 
    $: require.resolve('jquery'), 
    'window.$': require.resolve('jquery') 
    // ... and so on 
}

和你index.html會我是這樣的：

<script src='jquery.min.js'></script> 
<script src='myLibrary.min.js'></script>

來源

2017-07-07 13:30:45 Ematipico

他們不是從外部提供。它們被捆綁在一起，但我需要將它們提供給頁面上的任何單獨的js。我懷疑它發生了。 expose-loader並且不用擔心libraryTarget變量的重用結束了我的困境 – JamesT

Webpack代碼拆分與庫目標

回答

相關問題