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

Question

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

Answer 1

首先，你需要確定一下你打包出來的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這個全域變數賦值過來。

Answer 2

把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文件都不會把它打包進去

Answer 3

使用 externals，照樣用 require