深入浅出webpack之externals的使用

下面是 "深入浅出webpack之externals的使用" 的完整攻略：

1. 什么是externals

在webpack中，externals是一个重要的配置项，它的作用是告诉webpack，哪些模块是不需要打包进输出文件的。这样做的好处是可以减小输出文件的体积，同时也可以让一些公共模块在运行时从外部引入，提高打包后的程序的运行效率。

2. 如何使用externals

使用externals的前提条件是已经安装好了对应的第三方库。我们可以通过npm或yarn来安装需要的库。

在配置externals时，我们需要指定库的名称和在全局作用域下的变量名。接下来，我们来看两个示例：

2.1. 外部引用jquery库

通过CDN引入jquery库后，可以在webpack的配置文件中这样设置：

module.exports = {
  // ...
  externals: {
    jquery: 'jQuery'
  }
  // ...
}

当webpack打包时，它会在全局作用域中去查找jquery变量。如果找到了，则不会将jquery打包进输出文件。

2.2. 外部引用react库

React也是常用的库之一。当我们使用React时，通常会在全局作用域下创建React变量。我们可以在webpack的配置文件中这样设置：

module.exports = {
  // ...
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
  // ...
}

这里使用了对象字面量的方式，将react和react-dom库的名称映射到了全局作用域下的React和ReactDOM变量。这样，webpack就不会将React和ReactDOM打包进输出文件中了。

3. 总结

externals是一个很有用的webpack配置项，它可以帮助我们减小输出文件的体积，提高程序的运行效率。在使用externals时，我们需要指定库的名称和在全局作用域下的变量名，这样webpack才能正确的引用这些库。

以上就是 "深入浅出webpack之externals的使用" 的完整攻略。