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

1$ npm install --save-dev preconnect-html-webpack-plugin

使用方式

在 webpack config 中添加插件：

1const PreconnectHtmlWebpackPlugin = require('preconnect-html-webpack-plugin')
2
3...
4
5plugins: [
6  // set the preconnect origins
7  new PreconnectHtmlWebpackPlugin(['//test.a.com', '//test.b.com'])
8]

HTML 注入效果

结合 html-webpack-plugin，它会自动在 html 注入你需要的配置

注意: 请把 preconnect-html-webpack-plugin 放在 html-webpack-plugin 插件后面使用

1<link rel="preconnect" href="//test.a.com">
2<link rel="preconnect" href="//test.b.com">

高级用法

1const PreconnectHtmlWebpackPlugin = require('preconnect-html-webpack-plugin')
2
3...
4
5entry: {
6  test1: './src/test1.js',
7  test2: './src/test2.js'
8},
9plugins: [
10  new HtmlWebpackPlugin({
11    filename: 'test1.html',
12    title: 'test1',
13    template: './index.html',
14    preconnect: [
15      {
16        url: '//test.a.com',
17        crossorigin: true
18      }
19    ]
20  }),
21  new HtmlWebpackPlugin({
22    filename: 'test2.html',
23    title: 'test2',
24    preconnect: [
25      {
26        url: '//test.a.com',
27        crossorigin: true
28      },
29      '//test.b.com'
30    ]
31  }),
32  new PreconnectHtmlWebpackPlugin()
33]

new PreconnectHtmlWebpackPlugin() 中配置的属性将作用于所有 html 页面，并且优先级要高于 HtmlWebpackPlugin 中配置的 preconnect 属性