Skip to content

Commit c1a12e9

Browse files
committed
fix bug from uglify js which remove quotes
1 parent e64be1e commit c1a12e9

File tree

18 files changed

+185
-33
lines changed

18 files changed

+185
-33
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,3 +390,4 @@ If you still don't understand README, you can checkout examples in specWepback w
390390
- v1.1.2 print chunk name in runtime
391391
- v1.1.3 fix bug for using hot update
392392
- v1.2.0 support using loader and image in html
393+
- v1.2.2 fix bug from uglify js which remove quotes

README_ZH.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -390,4 +390,4 @@ plugins: [
390390
- v1.1.2 在运行时打印出chunk的名字
391391
- v1.1.3 修复使用热替换时的bug
392392
- v1.2.0 支持对html使用loader以及支持image插入到html中
393-
393+
- v1.2.2 修复uglify js引入的,去掉引号无法匹配问题

index.js

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -250,40 +250,63 @@ HtmlResWebpackPlugin.prototype.buildStats = function(compilation) {
250250
HtmlResWebpackPlugin.prototype.processAssets = function(compilation) {
251251
var htmlContent = compilation.assets[this.options.htmlFileName].source(),
252252
publicPath = this.webpackOptions.output.publicPath;
253-
254-
// console.log(this.stats.assets);
255-
// console.log(htmlContent);
256253

257-
// css inline
258-
let styleInlineRegex = new RegExp("<link.*href=[\"|\']*(.+)[\?]\_\_inline.*?[\"|\']>", "ig");
259-
htmlContent = this.inlineHtmlRes(htmlContent, styleInlineRegex, compilation, 'css');
260-
261-
// js liline
262-
let scriptInlineRegex = new RegExp("<script.*src=[\"|\']*(.+)[\?]\_\_inline.*?[\"|\']><\/script>", "ig");
263-
htmlContent = this.inlineHtmlRes(htmlContent, scriptInlineRegex, compilation, 'js');
264-
265-
// css
266-
let styleMd5Regex = new RegExp("<link.*href=[\"|\']*(.+).*?[\"|\']>", "ig");
267-
let cssPublicPath = this.options.cssPublicPath || publicPath;
268-
htmlContent = this.md5HtmlRes(htmlContent, styleMd5Regex, cssPublicPath, "css");
269-
270-
// favico
271-
htmlContent = this.md5HtmlRes(htmlContent, styleMd5Regex, publicPath, "ico");
272-
273-
// js
274-
let scriptMd5Regex = new RegExp("<script.*src=[\"|\']*(.+).*?[\"|\']><\/script>", "ig");
275-
htmlContent = this.md5HtmlRes(htmlContent, scriptMd5Regex, publicPath, "js");
254+
htmlContent = this.checkResource(htmlContent, publicPath, compilation);
276255

277256
compilation.assets[this.options.htmlFileName].source = () => {
278257
return this.options.templateContent.bind(this)(htmlContent);
279258
};
280259
};
281260

282-
HtmlResWebpackPlugin.prototype.md5HtmlRes = function(htmlContent, reg, publicPath, extension) {
261+
HtmlResWebpackPlugin.prototype.checkResource = function(htmlContent, publicPath, compilation) {
262+
let linkRegex = new RegExp("(<link[^>]*href=([\'\"]*)(.*?)([\'\"]*).*?\>)", "ig"),
263+
scriptRegex = new RegExp("(<script[^>]*src=([\'\"]*)(.*?)([\'\"]*).*?\>(<\/script>)?)", "ig");
264+
265+
htmlContent = htmlContent.replace(linkRegex, (route) => {
266+
if (!!~route.indexOf("__inline")) {
267+
// css inline
268+
let styleInlineRegex = new RegExp("<link.*href=(\s*?)*(.+)[\?]\_\_inline.*?(\s*?)>", "ig");
269+
route = this.inlineHtmlRes(route, styleInlineRegex, compilation, 'css');
270+
}
271+
else {
272+
// css md5
273+
let styleMd5Regex = new RegExp("<link.*href=(\s*?)*(.+).*?(\s*?)>", "ig");
274+
let cssPublicPath = this.options.cssPublicPath || publicPath;
275+
route = this.md5HtmlRes(route, styleMd5Regex, cssPublicPath, "css");
276+
277+
route = this.md5HtmlRes(route, styleMd5Regex, publicPath, "ico");
278+
}
279+
280+
return route;
281+
});
282+
283+
htmlContent = htmlContent.replace(scriptRegex, (route) => {
284+
if (!!~route.indexOf("__inline")) {
285+
// js inline
286+
let scriptInlineRegex = new RegExp("<script.*src=(\s*?)*(.+)[\?]\_\_inline.*?(\s*?)><\/script>", "ig");
287+
route = this.inlineHtmlRes(route, scriptInlineRegex, compilation, 'js');
288+
}
289+
else {
290+
// js md5
291+
let scriptMd5Regex = new RegExp("<script.*src=(\s*?)*(.+).*?(\s*?)><\/script>", "ig");
292+
route = this.md5HtmlRes(route, scriptMd5Regex, publicPath, "js");
293+
}
294+
295+
return route;
296+
});
297+
298+
return htmlContent;
299+
};
300+
301+
302+
HtmlResWebpackPlugin.prototype.md5HtmlRes = function(routeStr, reg, publicPath, extension) {
283303
let _this = this;
284304

285-
htmlContent = htmlContent.replace(reg, function(tag, route) {
286-
305+
routeStr = routeStr.replace(reg, function(tag, gap, route) {
306+
307+
route = route.replace(/[\"|']/g, "");
308+
// console.log(tag, gap, route);
309+
287310
if (extension === "ico" && !!~route.indexOf("." + extension)) {
288311
tag = tag.replace(route, publicPath + route);
289312
return tag;
@@ -307,14 +330,15 @@ HtmlResWebpackPlugin.prototype.md5HtmlRes = function(htmlContent, reg, publicPat
307330
return tag;
308331
});
309332

310-
return htmlContent;
333+
return routeStr;
311334
};
312335

313-
HtmlResWebpackPlugin.prototype.inlineHtmlRes = function(htmlContent, reg, compilation, extension) {
336+
HtmlResWebpackPlugin.prototype.inlineHtmlRes = function(routeStr, reg, compilation, extension) {
314337
let _this = this;
315338

316-
htmlContent = htmlContent.replace(reg, function(tag, route) {
317-
// console.log(tag, route);
339+
routeStr = routeStr.replace(reg, function(tag, gap, route) {
340+
route = route.replace(/[\"|']/g, "");
341+
// console.log(tag, gap, route);
318342
var assets = _this.stats.assets[route] || [],
319343
file = "";
320344

@@ -323,7 +347,6 @@ HtmlResWebpackPlugin.prototype.inlineHtmlRes = function(htmlContent, reg, compil
323347
}
324348

325349
assets.forEach(function(item, index) {
326-
327350
if (!!~item.indexOf("." + extension) && extension === "js") {
328351
file = "<script>" + compilation.assets[item].source() + "</script>";
329352
}
@@ -342,7 +365,7 @@ HtmlResWebpackPlugin.prototype.inlineHtmlRes = function(htmlContent, reg, compil
342365
return tag;
343366
});
344367

345-
return htmlContent;
368+
return routeStr;
346369
};
347370

348371
/**

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "html-res-webpack-plugin",
3-
"version": "1.2.1",
3+
"version": "1.2.2",
44
"description": "html generation and resource inline or md5 for webpack",
55
"keywords": [
66
"front-end",

spec/appSpec.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,18 @@ describe("resource-md5-3", function() {
101101
});
102102
});
103103

104+
describe("resource-md5-4", function() {
105+
it("=> html mode md5 with compression", function() {
106+
let distHtml = path.resolve('specWebpack/dist/resource-md5-4/index.html'),
107+
resultHtml = path.resolve('specWebpack/result/resource-md5-4/index.html');
108+
109+
let distContent = fs.readFileSync(distHtml).toString(),
110+
resultContent = fs.readFileSync(resultHtml).toString();
111+
112+
expect(true).toBe(distContent === resultContent);
113+
});
114+
});
115+
104116
describe("resource-favico", function() {
105117
it("=> generate favicon", function() {
106118
let distHtml = path.resolve('specWebpack/dist/resource-favico/index.html'),

specWebpack/.DS_Store

-8 KB
Binary file not shown.
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body,html{margin:0;padding:0}

specWebpack/dist/resource-md5-4/cdn/js/index-60e5a2.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

specWebpack/dist/resource-md5-4/cdn/js/react-7841da.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html lang=zh><head><meta charset=utf-8><title>Tencent QQ</title><script src=react></script><link rel=stylesheet href=//localhost:9000/./cdn/css/index-71e1a7.css><body><div id=pages class=qq-ui></div><script src=//localhost:9000/cdn/js/react-7841da.js></script><script src=//localhost:9000/cdn/js/index-60e5a2.js></script>

0 commit comments

Comments
 (0)