用webpack,輸出多個出口文件,每個出口文件對應一個頁面,重複引用jquery？

01-26

最近在學習在gulp下使用webpack,第一次接觸,按照我的理解,每個頁面會引用一個出口文件,這個出口文件處理這個頁面的各種邏輯功能,但是我在入口文件用var $ = require("jquery");的方法引用jquery的時候,會不會導致每個出口文件都會將jquery打包進去,導致每個出口文件重複打包jquery。難道webpack是只有一個出口文件,然後所有頁面的邏輯都在這個出口文件里,每個頁面都引用這個出口文件嗎？還是說頁面中單獨再引用jquery,不打包它。

1、把jquery作為一個包也打包：

// a b 對應你的頁面入口 entry: { "vendor": ["jquery"] "a": ["src/a.js"], "b": ["src/b.js"] }

2、然後把 vendor 作為 common：

plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor","vendor.js") ]

3、在 a 頁面中：

& &


這樣就行了
4、如果嫌每次 var $ = require("jquery") 麻煩，可以這樣配置：
plugins:[

        new webpack.ProvidePlugin({

            $: "jquery"

        })

]


這樣就不用每次都 require("jquery") ，直接使用 $ 就行
====

 
今天再補充一下，jquery 這種庫一般都有 CDN 支持的，所以不一定非要自己打包，可以通過 externals 配置一下：
externals: {

    "jquery": "window.jQuery"

}


你的頁面里可以這樣寫：
&

&

建議把jq單獨寫一個script標籤引入。

@一波不是一波的答案是可以解決題主的問題的，將共用模塊單獨打包成的vendor.js中還會包括webpack的rumtime代碼。通常來說，vendor包含的模塊最好是與業務相關的模塊（或者只包含webpack rumtime）而非像jQuery這種獨立的第三方庫。我們團隊對第三方庫的處理方案就是常規的script標籤引入，一方面不讓它參與構建以免影響構建性能，另一方面使用全站統一的url也利於瀏覽器緩存。

原文刪除

  推薦閱讀：


※webpack真的適合SPA么？
※webpack如何全局引入jquery和插件?
※徹底解決Webpack打包性能問題
※webpack技術講解及入門
※webpack源碼學習系列之一：如何實現一個簡單的webpack
TAG:前端開發 | JavaScript | webpack |