搜尋

首頁  >  問答  >  主體

前端 - webpack如何打包script标签引入的代码

比如我的库文件vue,vuex 这些都是通过cdn 使用script加载到html,那我在打包的时候 就不会去打包库文件,而是使用我的script的资源。那我源码里面就不能使用require('vue') 这种代码。这个应该如何解决

阿神阿神2872 天前522

全部回覆(3)我來回復

  • 迷茫

    迷茫2017-04-17 16:39:13

    首先,你需要確定一下你打包出來的bundle檔案支援的模組規格。我自己比較喜歡umd,所以我自己打包出來的bundle檔案都是umd的。也就是說它支援commjs和amd以及global的模組形式。很慶幸,vue發佈的套件也是umd的,也就是說和webpack打包出來的bundle是一樣的。

    其次,umd是怎麼引用模組的?當你不使用requirejs這樣模組引擎時,會直接透過script標籤引入模組檔。例如你同時引入了多個webpack打包後的bundle文件,在這些文件之間,其實它們是透過global模式相互引用,實際上也就是在window上掛了一個對象,在第二個bundle文件裡直接使用window上掛的這個物件作為全域變數即可。上面說vue是遵循umd的,所以在你透過兩個script標籤引入vue和你自己的bundle檔案的時候,可以透過window.Vue來引用vue。

    再,你的bundle應該怎麼引用由script標籤引進的vue呢?就是要使用上面網友的externals。你需要建立一個externals規則來引用到這個vue,externals的使用方法可以看webpack官網,但是官網的解釋太簡單了,我根據官網的例子,寫了一篇關於externals的博客進行詳解,有興趣可以讀下。在你的case裡面,externals應該包含:

    {
        externals: [
            {
                vue: 'Vue',
                jquery: 'jQuery',
                ...
            }
            ...
        ]
    }

    上面是webpack配置中的一部分,在你的源碼裡面這樣使用:

    import vue from 'vue'

    這樣即可,在打包出來的bundle檔案內,你就可以看到在global模式下,會把Vue這個全域變數賦值過來。

    回覆
    0
  • 黄舟

    黄舟2017-04-17 16:39:13

    把vue vuex這些抽取出來;

     entry: {
        'vue': ['vue,''vuex']
      },
    

    plugins裡寫:

    const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
    new CommonsChunkPlugin({ name: ['vue'], filename: '文件夹名/[name].js'}),

    這樣不管你是否require('vue'),都會把vue和vuex等等生成一個單獨的文件夹名/vue.js
    並且這個vue.js包含的內容你的其他webpackjs文件都不會把它打包進去

    回覆
    0
  • 迷茫

    迷茫2017-04-17 16:39:13

    使用 externals,照樣用 require

    回覆
    0
  • 取消回覆