包含webpackexternals的词条

简介：

在使用Webpack打包时，如果使用了一些外部的库或者框架，那么可以通过Webpack的外部模块来避免将这些库或者框架打包进项目中从而减少打包的体积，提高打包效率。

多级标题：

一、什么是Webpack的外部模块

二、为什么使用Webpack的外部模块

三、如何配置Webpack的外部模块

内容详细说明：

一、什么是Webpack的外部模块

Webpack的外部模块是一种通过配置Webpack，将一些用到的大型依赖库去外面获取，在编译过程中不打包进项目中的技术。这个特性提供了一种将库明确定义为外部依赖项的方法。

二、为什么使用Webpack的外部模块

Webpack默认使用内部模块打包，在打包时会将所有的依赖项都打包进去，这样会造成打包文件体积变大，效率变低的情况。而外部模块可以避免这种情况的出现，因为外部模块会将一些大型依赖库去外面获取，使得项目体积更小，打包更快。

三、如何配置Webpack的外部模块

在Webpack的配置中，可以通过externals属性来添加外部依赖，示例代码如下：

```javascript

module.exports = {

// ...

externals: {

'react': 'React',

'react-dom': 'ReactDOM'

}

```

上面的配置可以将React和ReactDOM这两个库定义为外部依赖，这样Webpack打包时就不会包含React和ReactDOM。如果在项目中需要使用React和ReactDOM，可以在HTML页面中手动引入。

除了上面的简单配置方式，还可以使用函数将依赖项转换为外部依赖项，具体代码如下：

```javascript

module.exports = {

// ...

externals: {

moment: {

commonjs: 'moment',

commonjs2: 'moment',

amd: 'moment',

root: 'moment'

}

}

```

上面的代码中，使用了一个对象来描述moment的外部依赖方式，表示CommonJS、AMD、全局变量和普通的模块方式都可以引用moment。

总结：

Webpack的外部模块可以有效的帮助我们减少项目体积，加快打包速度。引用外部依赖的方法也比较简单，可以根据自己项目的需求来选择不同的配置方式。