# externals
项目中所有使用到的代码都会被打包到项目中。
但实际开发时，我们有很多项目中用到的模块是不希望被打包到代码中的。比如，我们常使用 `jquery` 这个库，这个库我们一般都放到 CDN 上然后通过 script 标签引入来使用，这时我们就可以配置 `externals` 属性。
webpack 在打包时，externals 中的模块不会被打包到最终的代码中。
配置文件
~~~json
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
externals: {
'jquery': '$'
}
}
~~~
配置了 externals 之后，当我们在项目中引入 jquery 时：
~~~
import $ from 'jquery'
~~~
jquery 是不会被打包到最终代码中的。
我们一般需要单独通过 script 标签引入 jquery：
~~~
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" />
~~~
