preconnect-html-webpack-plugin
This extension plugin embeds <link rel="preconnect">
tags into HTML files generated by the HtmlWebpackPlugin. Supported in Webpack 3/4, html-webpack-plugin 3/4
安装
使用 npm 或者 yarn
$ npm install --save-dev preconnect-html-webpack-plugin
使用方式
在 webpack config 中添加插件:
const PreconnectHtmlWebpackPlugin = ... plugins: // set the preconnect origins '//test.a.com' '//test.b.com'
HTML 注入效果
结合 html-webpack-plugin,它会自动在 html 注入你需要的配置
注意: 请把
preconnect-html-webpack-plugin
放在html-webpack-plugin
插件后面使用
高级用法
const PreconnectHtmlWebpackPlugin = ... entry: test1: './src/test1.js' test2: './src/test2.js'plugins: filename: 'test1.html' title: 'test1' template: './index.html' preconnect: url: '//test.a.com' crossorigin: true filename: 'test2.html' title: 'test2' preconnect: url: '//test.a.com' crossorigin: true '//test.b.com'
new PreconnectHtmlWebpackPlugin()
中配置的属性将作用于所有 html 页面,并且优先级要高于 HtmlWebpackPlugin 中配置的 preconnect 属性