webpack 的externals配置

externals作用

        webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。

        如果需要引用一个库或文件，但是又不让它被webpack打包（减少打包的时间+减少打包后的bundle文件体积），且不影响在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals来实现。

总结这样做目的就是：

        将不怎么需要更新的第三方库，脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响我们使用第三方库的方式，例如import方式等

externals用法

module.exports={
    configureWebpack:congig =>{
        externals:{
            key: value
        }
    }
}

语法说明

• key是第三方依赖库的名称，同package.json文件中的dependencies对象的key一样

• value值可以是字符串、数组、对象。应该是第三方依赖编译打包后生成的js（要用CDN引入的js文件）文件，执行后赋值给window的全局变量名称。

externals使用举例

（1）在index.html中引入CDN的资源，如react全家桶之类的资源

<script src="https://lib.baomitu.com/react/16.4.0-alpha.7926752/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/cjs/react-dom-server.browser.development.js"></script>
     

（2）webpack.config.js 中配置

  module.exports = {
     ...
     output: {
       ...
     },
     externals : {
       react: 'react',
       redux: 'redux'
     }
     ...
   }
 

（3）以import的方式（还支持其他方式）引用

import React from 'react'
import { createStore, combineReducers, applyMiddleware } from 'redux'
 

        这样不仅之前对第三方库的用法不变，还把第三方库剥离出webpack的打包中，从而加快webpack的打包速度。

参考：

Webpack--externals(外部扩展)详解