webpack引入cdn
时间: 2023-10-12 07:06:39 浏览: 54
要在Webpack中引入CDN资源,你可以使用`html-webpack-plugin`插件来实现。首先,确保你已经安装了`html-webpack-plugin`插件。
然后,在Webpack配置文件中的plugins部分,添加以下代码:
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 其他配置项...
plugins: [
new HtmlWebpackPlugin({
// 设置模板文件
template: 'index.html',
// 在模板文件中使用 <%= htmlWebpackPlugin.options.cdn %> 插入CDN链接
cdn: 'https://cdn.example.com/your-cdn-path',
}),
],
};
```
在此例子中,我们将CDN链接设置为`https://cdn.example.com/your-cdn-path`,你需要替换成你自己的CDN链接。同时,确保你的项目根目录下存在一个名为`index.html`的模板文件,该文件将被`html-webpack-plugin`用作生成的HTML文件的基础。
在模板文件中,你可以使用`<%= htmlWebpackPlugin.options.cdn %>`的语法来插入CDN链接到你想要的位置。例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack CDN Example</title>
</head>
<body>
<script src="<%= htmlWebpackPlugin.options.cdn %>/your-script.js"></script>
</body>
</html>
```
这样,Webpack在生成HTML文件时会自动将CDN链接插入到指定的位置。希望这能帮助到你!如果还有其他问题,请随时提问。