深入浅出webpack之externals的使用

深入理解Webpack中的externals与它的实际应用

===========================

Webpack是一个强大的模块打包工具，它允许开发者将多个模块打包成一个或多个文件，以优化浏览器加载和的效率。有时候我们可能不希望某些库被打包进Webpack的bundle中，这时我们就可以使用Webpack的externals配置。下面我们就来详细一下Webpack中的externals及其实际应用。

一、什么是externals？

当我们不想将某些库（如jQuery、lodash等）打包进Webpack bundle时，就可以使用Webpack的externals配置。这意味着这些库会在浏览器中以独立的形式被加载和使用。通过这种方式，我们可以优化应用的加载速度并减小bundle的大小。在Webpack配置文件中，我们可以定义哪些模块应该被认为是外部的，也就是不被打包进bundle中。这样，当我们在代码中通过require或import引用这些模块时，Webpack不会处理它们，而是在运行时从全局变量中访问它们。这样我们可以保证应用的构建过程不会因为这些外部模块而受到影响。官方文档对externals的解释非常清晰，其工作原理主要是通过配置来指定哪些模块应该被排除在打包过程之外。

二、如何使用externals？

-

使用externals其实非常简单，只需三步：

1. 在HTML中引入第三方库的CDN。例如，如果你想使用jQuery库，你可以在HTML文件中引入jQuery的CDN链接。

2. 在webpack配置文件中配置externals。例如：

```javascript

module.exports = {

//...

externals: {

jquery: "jQuery", // 这意味着在你的代码中可以通过require('jquery')来引用jQuery库，但它不会被打包进bundle中。而是从全局变量jQuery中访问。

lodash: 'lodash' // lodash同样通过全局变量lodash来访问。

}

};

```

3. 在你的JavaScript代码中引用这些库。例如：你可以通过 `require('jquery')` 来引用jQuery库。然后你就可以在你的代码中使用jQuery的各种功能了。注意这一步，我们不能再使用 `const $ = require('jquery');` 这样的写法来引入jquery了，因为我们已经把它设置为外部的库了，直接使用全局变量即可。同样的道理也适用于lodash等其他库。

三、源码分析原理

-

当我们在源码中使用 `require('jquery')` 时，通过配置externals得到的打包文件trunk.js会将这个依赖指向全局变量jQuery。这个全局变量是在引入trunkjs之前已经定义的（也就是在HTML文件中引入的jQuery CDN）。通过这种方式，我们的bundle就能在不包含第三方库的情况下运行了。这就是webpack的externals配置如何工作的基本原理。通过这种方式，我们可以灵活地管理我们的依赖关系并优化我们的应用性能。具体细节取决于你的代码和使用场景。在实际开发中要注意保持一致性并理解你正在使用的模块化规范（如CommonJS, AMD等）。另外还要注意库文件的具体输出方式（如global模式还是monjs规范等）。在选择模块化方案时可以根据你的应用需求和环境需求来决定使用哪种方式最合适。通过这种方式使用externals我们可以提高应用的加载速度和性能同时还能减小bundle的大小以实现更高效的构建过程。模块化输出的选择与配置：从UMD到AMD，再到Webpack的Externals设置

在前端开发中，模块化输出是确保代码组织有序、兼容性强和可维护性的关键。今天我们将深入不同的模块化输出方式，如UMD、AMD等，并了解如何在Webpack中通过配置Externals来优化模块输出。

让我们了解一下常见的模块化输出方式：

UMD：Universal Module Definition的缩写，这是一种通用的模块定义方式。UMD允许模块在AMD、CommonJS或全局变量等多种环境中运行。这意味着无论你的项目采用哪种模块系统，UMD都能确保模块正常工作。

AMD：Asynchronous Module Definition的缩写，它支持异步加载模块。这种方式适用于那些依赖异步加载的场景。

CommonJS：Node.js中常用的模块系统，它允许同步加载模块。在浏览器环境中，它通常通过如Browserify或Webpack等工具进行转换和使用。

接下来，我们谈谈Webpack中的Externals设置。Externals是Webpack配置中的一个重要部分，它允许你指定哪些模块是外部的，即这些模块不需要Webpack去处理或打包。这对于那些已经存在于环境中的库（如jQuery、lodash等）非常有用。当你指定一个模块为外部时，你需要同时指定这个模块在全局环境中的名称或如何获取这个模块。这样，Webpack在打包时就会忽略这些外部模块，避免重复打包和引入不必要的代码。

假设你在项目中使用了lodash库，并且你希望以UMD的方式输出你的项目代码。你希望告诉Webpack，当你引入lodash时，它应该遵循特定的模块化方式（如monjs、root等）。这时，你可以在Externals配置中指定lodash的模块化方式。这意味着你的业务逻辑代码不需要改变，只需要调整Webpack的配置即可。如果你的项目中还使用了其他库（如echarts），你也不需要改变这些库的引入方式。只需确保你的Externals配置正确即可。

那么，如何配置呢？以下是一个简单的示例：

```javascript

entry: {

main: './src/index.js'

},

externals: {

jquery: "jQuery",

lodash: {

monjs: 'lodash',

monjs2: 'lodash',

amd: 'lodash',

root: '_'

}

},

output: {

filename: '[name].[chunkhash].js',

path: path.resolve(__dirname,'dist'),

libraryTarget: 'umd' // 设置输出为UMD格式

},

```

在这个配置中，我们告诉Webpack以UMD格式输出我们的项目代码。这意味着无论项目代码在何种环境中运行，它都能正常工作。我们指定了lodash的模块化方式（如monjs等），这样在打包时Webpack就不会尝试去处理或打包lodash库。这样既能确保项目的模块化输出正确，又能避免不必要的代码重复和引入问题。同时要注意的是，调整配置后无需改变业务逻辑代码。这就是Externals和libraryTarget的魔力所在。希望这篇文章能帮助大家更好地理解模块化输出和Webpack的配置方式。也希望大家多多支持狼蚁SEO的学习资源和技术分享。