Skip to content

Commit 1f7549c

Browse files
AppleloApplelo
authored
Merge pull request #19 from principalstudio:Applelo/issue18
Add support for publicPath
2 parents 6530214 + 1d68ca2 commit 1f7549c

File tree

5 files changed

+82
-46
lines changed

5 files changed

+82
-46
lines changed

‎package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@principalstudio/html-webpack-inject-preload",
3-
"version": "1.2.4",
3+
"version": "1.2.5",
44
"description": "A HTML Webpack plugin for injecting <link rel='preload'>",
55
"main": "lib/main.js",
66
"types": "lib/main.d.ts",
@@ -9,7 +9,7 @@
99
"test": "jest --config=./test/jest.config.js",
1010
"all": "npm run build && npm run test && npm link",
1111
"all-quick": "npm run build && npm link",
12-
"prepublishOnly": "npm run build"
12+
"prepublishOnly": "npm run build && npm run test"
1313
},
1414
"engines": {
1515
"node": ">=10.23"
@@ -33,18 +33,18 @@
3333
"devDependencies": {
3434
"@types/jest": "^26.0.20",
3535
"@types/node": "^14.14.31",
36-
"@typescript-eslint/parser": "^4.15.1",
37-
"css-loader": "^5.0.2",
36+
"@typescript-eslint/parser": "^4.15.2",
37+
"css-loader": "^5.1.0",
3838
"eslint": "^7.20.0",
3939
"file-loader": "^6.2.0",
4040
"html-webpack-plugin": "5.2.0",
4141
"jest": "^26.6.3",
42-
"mini-css-extract-plugin": "^1.3.8",
42+
"mini-css-extract-plugin": "^1.3.9",
4343
"prettier": "^2.2.1",
44-
"ts-jest": "^26.5.1",
45-
"typescript": "^4.1.5",
44+
"ts-jest": "^26.5.2",
45+
"typescript": "^4.2.2",
4646
"url-loader": "^4.1.1",
47-
"webpack": "^5.23.0"
47+
"webpack": "^5.24.2"
4848
},
4949
"peerDependencies": {
5050
"webpack": "^4.0.0 || ^5.0.0",

‎src/main.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ declare namespace HtmlWebpackInjectPreload {
1616
}
1717

1818
interface HtmlWebpackPluginData {
19-
headTags: Array<HtmlTagObject | HtmlTagObject>;
20-
bodyTags: Array<HtmlTagObject | HtmlTagObject>;
19+
headTags: HtmlWebpackPluginInstance.HtmlTagObject[];
20+
bodyTags: HtmlWebpackPluginInstance.HtmlTagObject[];
2121
outputName: string;
22+
publicPath: string;
2223
plugin: HtmlWebpackPluginInstance;
2324
}
2425

@@ -29,12 +30,12 @@ interface HtmlWebpackPluginData {
2930
* new HtmlWebpackInjectPreload({
3031
* files: [
3132
* {
32-
* match: /.*\.woff2/,
33+
* match: /.*\.woff2/$,
3334
* attributes: { rel: 'preload', as: 'font', type: 'font/woff2',
3435
* crossorigin: true },
3536
* },
3637
* {
37-
* match: /vendors\.[a-z-0-9]*.css/,
38+
* match: /vendors\.[a-z-0-9]*.css/$,
3839
* attributes: { rel: 'preload', as: 'style' },
3940
* },
4041
* ],
@@ -104,7 +105,7 @@ class HtmlWebpackInjectPreload implements WebpackPluginInstance {
104105
if (href === false || typeof href === 'undefined') {
105106
href = asset;
106107
}
107-
href = href[0] === '/' ? href : '/' + href;
108+
href = href[0] === '/' ? href : htmlPluginData.publicPath + href;
108109

109110
const preload: HtmlTagObject = {
110111
tagName: 'link',
@@ -140,7 +141,7 @@ class HtmlWebpackInjectPreload implements WebpackPluginInstance {
140141
const HtmlWebpackPlugin = this.extractHtmlWebpackPluginModule(compiler);
141142
if (!HtmlWebpackPlugin) {
142143
throw new Error(
143-
'HtmlWebpackInjectPreload needs to be used with html-webpack-plugin@4',
144+
'HtmlWebpackInjectPreload needs to be used with html-webpack-plugin 4 or 5',
144145
);
145146
}
146147

‎test/expected.html renamed to ‎test/expected-1.html

File renamed without changes.

‎test/expected-2.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/test/main.js"></script><link rel="preload" href="test-alt.css" as="style"><link rel="preload" href="/test/Roboto-Bold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/test/Roboto-Regular.woff" as="font" type="font/woff" crossorigin><link rel="preload" href="/test/Roboto-Regular.woff2" as="font" type="font/woff2" crossorigin><link href="/test/main.css" rel="stylesheet"></head><body></body></html>

‎test/index.test.ts

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,42 +34,76 @@ const options: HtmlWebpackInjectPreload.Options = {
3434
],
3535
};
3636

37-
describe('HTMLWebpackInjectPreload', () => {
38-
it('webpack plugin', done => {
39-
const compiler = webpack({
40-
mode: 'production',
41-
context: path.resolve(__dirname),
42-
entry: path.join(__dirname, 'entry.js'),
43-
module: {
44-
rules: [
45-
{
46-
test: /\.css$/i,
47-
use: [MiniCssExtractPlugin.loader, 'css-loader'],
48-
},
37+
const config: webpack.Configuration = {
38+
mode: 'production',
39+
context: path.resolve(__dirname),
40+
entry: path.join(__dirname, 'entry.js'),
41+
module: {
42+
rules: [
43+
{
44+
test: /\.css$/i,
45+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
46+
},
47+
{
48+
test: /\.(woff|woff2)$/,
49+
use: [
4950
{
50-
test: /\.(woff|woff2)$/,
51-
use: [
52-
{
53-
loader: 'url-loader',
54-
options: {
55-
name: '[name].[ext]',
56-
limit: 8192,
57-
},
58-
},
59-
],
51+
loader: 'url-loader',
52+
options: {
53+
name: '[name].[ext]',
54+
limit: 8192,
55+
},
6056
},
6157
],
6258
},
59+
],
60+
},
61+
output: {
62+
path: path.join(__dirname, 'dist/test1'),
63+
publicPath: '/',
64+
},
65+
plugins: [
66+
new MiniCssExtractPlugin() as WebpackPluginInstance,
67+
new HtmlWebpackPlugin(),
68+
new HtmlWebpackInjectPreload(options),
69+
],
70+
};
71+
72+
describe('HTMLWebpackInjectPreload', () => {
73+
it('test plugin', done => {
74+
const compiler = webpack(config);
75+
76+
compiler.run((err, stats) => {
77+
if (err) expect(err).toBeNull();
78+
79+
const statsErrors = stats ? stats.compilation.errors : [];
80+
if (statsErrors.length > 0) {
81+
console.error(statsErrors);
82+
}
83+
expect(statsErrors.length).toBe(0);
84+
85+
const result = fs.readFileSync(
86+
path.join(__dirname, 'dist/test1/index.html'),
87+
'utf8',
88+
);
89+
const expected = fs.readFileSync(
90+
path.join(__dirname, 'expected-1.html'),
91+
'utf8',
92+
);
93+
expect(result).toBe(expected);
94+
done();
95+
});
96+
});
97+
98+
it('test plugin public path', done => {
99+
const config2 = Object.assign(config, {
63100
output: {
64-
path: path.join(__dirname, 'dist'),
65-
publicPath: '/',
101+
path: path.join(__dirname, 'dist/test2'),
102+
publicPath: '/test',
66103
},
67-
plugins: [
68-
new MiniCssExtractPlugin() as WebpackPluginInstance,
69-
new HtmlWebpackPlugin(),
70-
new HtmlWebpackInjectPreload(options),
71-
],
72104
});
105+
const compiler = webpack(config2);
106+
73107
compiler.run((err, stats) => {
74108
if (err) expect(err).toBeNull();
75109

@@ -80,14 +114,14 @@ describe('HTMLWebpackInjectPreload', () => {
80114
expect(statsErrors.length).toBe(0);
81115

82116
const result = fs.readFileSync(
83-
path.join(__dirname, 'dist/index.html'),
117+
path.join(__dirname, 'dist/test2/index.html'),
84118
'utf8',
85119
);
86120
const expected = fs.readFileSync(
87-
path.join(__dirname, 'expected.html'),
121+
path.join(__dirname, 'expected-2.html'),
88122
'utf8',
89123
);
90-
expect(expected).toBe(result);
124+
expect(result).toBe(expected);
91125
done();
92126
});
93127
});

0 commit comments

Comments
 (0)