webpack如何使用cdn
时间: 2023-12-06 22:34:13 浏览: 196
vue_cdn_test.zip
Webpack可以通过配置externals选项来使用CDN。在Webpack配置文件中,添加externals选项,用于指定哪些模块将通过CDN加载而不是打包进最终的输出文件。例如,如果我们想要通过CDN加载jQuery库,可以将以下代码添加到Webpack配置文件中:
```
module.exports = {
// ...其他配置
externals: {
jquery: 'jQuery'
}
};
```
然后在HTML文件中,通过script标签引入CDN提供的资源。以jQuery为例,可以添加以下代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Webpack CDN 配置示例</title>
</head>
<body>
<!-- 其他内容 -->
<script src="https://cdn.example.com/jquery.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>
```
需要注意的是,在Webpack打包时,需要告知Webpack不要将已经通过CDN引入的模块再次打包进输出文件。可以使用插件如html-webpack-plugin来自动处理这一步骤。在Webpack配置文件中添加以下代码:
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...其他配置
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
excludeChunks: ['jquery']
})
]
};
```
阅读全文