详解 Webpack 之 externals 的使用

发表于

在项目开发过程中，不可避免地会引入许多第三方库，导致 Webpack 打包后的 bundle 文件过大，Webpack 提供的外部扩展(externals)可以很好地解决这个问题。

externals会告诉 Webpack 无需打包哪些库文件，然后我们再通过 CDN 引入。

Webpack 官方对externals的解释比较简单

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer’s environment)中的依赖。

也就是说，如果我们想引用一个库，但是并不想让 Webpack 打包，就可以使用 webpack 提供的 externals ，配置后我们依旧可以提供 CMD、AMD 或者window/global 全局的方式访问。

externals几种用法

array

数组内的每个元素可以是object，reg，string，function中任意一种

1
2
3
4
5
6
7
externals: [
    {
        react: "React"
    },
    /^[a-z\-0-9]+$/,
    //...
]

object

这种形式应该是最常见的配置形式。

1
2
3
externals: {
    react: 'React'
}

reg

1
externals: /^[a-z\-0-9]+$/

使用方法

  1. 在入口文件(app.html)中引入所需库的CDN

    1
    <script crossorigin src="www.example-cdn.html"></script>

  2. 在webpack.config.js文件中对externals进行配置

    1
    2
    3
    4
    5
    6
    module.exports = {
        //...
        externals: {
            react: 'React'
        }
    }

  3. 在js中进行引用

    1
    import React from 'react';

不同环境配置方式

  1. 上例这种配置方式就是 浏览器环境 下，通过<script>引入第三方库，也就是在window上挂载这个全局变量，然后就可以直接使用了。

  2. 如果你的代码需要运行在Node环境中，那么你需要在externals中添加前缀 commonjs2 或者 commonjs

    1
    2
    3
    4
    externals:{
      react:'commonjs2 react',
      lodash:'commonjs2 lodash'
    }

  3. 在符合AMD规范的环境中加载，需要添加前缀amd

    1
    2
    3
    4
    externals:{
      react:'amd React',
      lodash:'amd lodash'
    }