跳到主内容

webpack如何配置externals

· 2分钟阅读

externals 是什么?

官方的定义是:webpack 的 externals 是为了防止将某些 import 的包打包到 bundle 中,而是在运行时去从外部获取这些扩展依赖

如何使用?

如何理解运行时去从外部获取这些扩展依赖。比如我们使用 react,我们会这样写。

import React from 'react'

打包的时候会将 react 打包进 bundle 中,导致包的体积过大,为了合理利用缓存,我们可以使用 externals 参数,将 react 打包到外部。

可以通过 webpack.config.js 中的 externals 参数来配置 externals,这样就不会将 react 打包进 bundle 中。例如下面的配置。

externals: {
React: "react";
}

配置完了后,需要在 index.html 文件引入 react.js 文件

<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/cjs/react.production.min.js"></script>

注意事项

通过外部引入的 react 版本必须跟 package.json 里面的 react 版本号一致,否则会出现不可预知的错误。