前端 - 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包含的内容你的其他webpack入口js文件都不会把它打包进去

Answer 3

使用 externals，照样用 require