{"id":52201,"date":"2025-08-07T15:39:49","date_gmt":"2025-08-07T07:39:49","guid":{"rendered":"https:\/\/www.edabao.net\/dabao\/?p=52201"},"modified":"2025-08-07T15:39:49","modified_gmt":"2025-08-07T07:39:49","slug":"%e5%89%8d%e7%ab%afhtml%e6%89%93%e5%8c%85%e6%93%8d%e4%bd%9c%e5%8a%9e%e6%b3%95%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/www.edabao.net\/dabao\/kaifaexe\/52201\/","title":{"rendered":"\u524d\u7aefhtml\u6253\u5305\u64cd\u4f5c\u529e\u6cd5\u4ecb\u7ecd"},"content":{"rendered":"

\u524d\u7aefHTML\u6253\u5305\uff0c\u662f\u6307\u5c06\u591a\u4e2aHTML\u6587\u4ef6\u5408\u5e76\u6210\u4e00\u4e2a\u6216\u5c11\u91cfHTML\u6587\u4ef6\u7684\u8fc7\u7a0b\uff0c\u4ee5\u51cf\u5c11\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u548cHTTP\u8bf7\u6c42\u6b21\u6570\uff0c\u63d0\u9ad8\u7f51\u7ad9\u6027\u80fd\u3002\u672c\u6587\u5c06\u4ece\u539f\u7406\u548c\u8be6\u7ec6\u4ecb\u7ecd\u4e24\u4e2a\u65b9\u9762\u8fdb\u884c\u8bb2\u89e3\u3002<\/p>\n

\u4e00\u3001\u539f\u7406<\/p>\n

\u524d\u7aefHTML\u6253\u5305\u7684\u539f\u7406\u4e3b\u8981\u57fa\u4e8e\u4e24\u4e2a\u65b9\u9762\uff1aHTTP\u534f\u8bae\u548c\u6d4f\u89c8\u5668\u7f13\u5b58\u673a\u5236\u3002<\/p>\n

1. HTTP\u534f\u8bae<\/p>\n

HTTP\u534f\u8bae\u662f\u57fa\u4e8e\u8bf7\u6c42-\u54cd\u5e94\u6a21\u5f0f\u7684\u534f\u8bae\uff0c\u6bcf\u6b21\u8bf7\u6c42\u90fd\u4f1a\u4ea7\u751f\u4e00\u6b21HTTP\u54cd\u5e94\u3002\u5f53\u6d4f\u89c8\u5668\u8bf7\u6c42HTML\u6587\u4ef6\u65f6\uff0c\u670d\u52a1\u5668\u4f1a\u54cd\u5e94\u4e00\u4e2aHTML\u6587\u4ef6\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u4e2d\u4f1a\u4ea7\u751f\u4e00\u4e9b\u989d\u5916\u7684\u5f00\u9500\uff0c\u5982DNS\u67e5\u627e\u3001TCP\u63e1\u624b\u3001TLS\u63e1\u624b\u3001\u8bf7\u6c42\u5934\u3001\u54cd\u5e94\u5934\u7b49\u3002\u5982\u679c\u4e00\u4e2a\u9875\u9762\u9700\u8981\u8bf7\u6c42\u591a\u4e2aHTML\u6587\u4ef6\uff0c\u90a3\u4e48\u8fd9\u4e9b\u989d\u5916\u7684\u5f00\u9500\u5c31\u4f1a\u7d2f\u79ef\uff0c\u5bfc\u81f4\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u53d8\u957f\u3002<\/p>\n

2. \u6d4f\u89c8\u5668\u7f13\u5b58\u673a\u5236<\/p>\n

\u6d4f\u89c8\u5668\u7f13\u5b58\u673a\u5236\u662f\u6307\u6d4f\u89c8\u5668\u5728\u8bbf\u95ee\u9875\u9762\u65f6\uff0c\u4f1a\u5c06\u9875\u9762\u7684\u8d44\u6e90\u7f13\u5b58\u5230\u672c\u5730\u3002\u5f53\u518d\u6b21\u8bbf\u95ee\u9875\u9762\u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u4f18\u5148\u4f7f\u7528\u672c\u5730\u7f13\u5b58\u7684\u8d44\u6e90\uff0c\u4ece\u800c\u51cf\u5c11HTTP\u8bf7\u6c42\u6b21\u6570\uff0c\u63d0\u9ad8\u7f51\u7ad9\u6027\u80fd\u3002<\/p>\n

\u4e8c\u3001\u8be6\u7ec6\u4ecb\u7ecd<\/p>\n

\u524d\u7aefHTML\u6253\u5305\u7684\u5b9e\u73b0\u6709\u591a\u79cd\u65b9\u5f0f\uff0c\u5982\u624b\u52a8\u5408\u5e76\u3001Gulp\u3001Webpack\u7b49\u3002\u4e0b\u9762\u5c06\u5206\u522b\u4ecb\u7ecd\u8fd9\u4e09\u79cd\u65b9\u5f0f\u7684\u5b9e\u73b0\u65b9\u6cd5\u3002<\/p>\n

1. \u624b\u52a8\u5408\u5e76<\/p>\n

\u624b\u52a8\u5408\u5e76\u662f\u6700\u57fa\u7840\u7684\u6253\u5305\u65b9\u5f0f\uff0c\u4e5f\u662f\u6700\u5bb9\u6613\u5b9e\u73b0\u7684\u4e00\u79cd\u65b9\u5f0f\u3002\u5176\u5b9e\u73b0\u65b9\u6cd5\u662f\u5c06\u591a\u4e2aHTML\u6587\u4ef6\u624b\u52a8\u5408\u5e76\u6210\u4e00\u4e2a\u6216\u5c11\u91cfHTML\u6587\u4ef6\uff0c\u7136\u540e\u5c06\u8fd9\u4e9bHTML\u6587\u4ef6\u90e8\u7f72\u5230\u670d\u52a1\u5668\u4e0a\u3002<\/p>\n

\u624b\u52a8\u5408\u5e76\u7684\u4f18\u70b9\u662f\u7b80\u5355\u6613\u61c2\uff0c\u4e0d\u9700\u8981\u4f7f\u7528\u4efb\u4f55\u5de5\u5177\uff0c\u9002\u7528\u4e8e\u5c0f\u578b\u9879\u76ee\u3002\u7f3a\u70b9\u662f\u9700\u8981\u624b\u52a8\u5408\u5e76HTML\u6587\u4ef6\uff0c\u5bb9\u6613\u51fa\u9519\uff0c\u9002\u7528\u6027\u8f83\u5dee\u3002<\/p>\n

2. Gulp<\/p>\n

Gulp\u662f\u4e00\u79cd\u57fa\u4e8e\u6d41\u7684\u81ea\u52a8\u5316\u6784\u5efa\u5de5\u5177\uff0c\u901a\u8fc7\u7f16\u5199Gulp\u4efb\u52a1\uff0c\u53ef\u4ee5\u5b9e\u73b0\u81ea\u52a8\u5316\u6784\u5efa\u3001\u6587\u4ef6\u5408\u5e76\u3001\u4ee3\u7801\u538b\u7f29\u7b49\u529f\u80fd\u3002\u4f7f\u7528Gulp\u8fdb\u884cHTML\u6253\u5305\u7684\u5b9e\u73b0\u65b9\u6cd5\u5982\u4e0b\uff1a<\/p>\n

\uff081\uff09\u5b89\u88c5Gulp<\/p>\n

\u5728\u547d\u4ee4openrestyrpm\u5305<\/a>\u884c\u7a97\u53e3\u4e2d\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n

“`<\/p>\n

npm install gulp -g<\/p>\n

“`<\/p>\n

\uff082\uff09\u521b\u5efaGulpfile.js\u6587\u4ef6<\/p>\n

\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2aGulpfile.js\u6587\u4ef6\uff0c\u5185\u5bb9\u5982\u4e0b\uff1a<\/p>\n

“`<\/p>\n

var gulp = require(‘gulp’);<\/p>\n

var concat = require(‘gulp-concat’);<\/p>\n

gulp.task(‘concat’, function() {<\/p>\n

return gulp.src(‘src\/*.html’)<\/p>\n

.pipe(concat(‘index.html’))<\/p>\n

.pipe(gulp.dest(‘dist\/’));<\/p>\n

});<\/p>\n

“`<\/p>\n

\uff083\uff09\u8fd0\u884cGulp\u4efb\u52a1<\/p>\n

\u5728\u547d\u4ee4\u884c\u7a97\u53e3\u4e2d\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n

“`<\/p>\n

gulp concat<\/p>\n

“`<\/p>\n

\u6267\u884c\u5b8c\u6bd5\u540e\uff0c\u4f1a\u5728dist\u76ee\u5f55\u4e0b\u751f\u6210\u4e00\u4e2aindex.html\u6587\u4ef6\uff0c\u5176\u4e2d\u5305\u542bsrc\u76ee\u5f55\u4e0b\u6240\u6709HTML\u6587\u4ef6\u7684\u5185\u5bb9\u3002<\/p>\n

Gulp\u7684\u4f18\u70b9\u662f\u529f\u80fd\u5f3a\u5927\uff0c\u53ef\u4ee5\u5b9e\u73b0\u81ea\u52a8\u5316\u6784\u5efa\u3001\u6587\u4ef6\u5408\u5e76\u3001\u4ee3\u7801\u538b\u7f29\u7b49\u529f\u80fd\uff0c\u9002\u7528\u4e8e\u4e2d\u5c0f\u578b\u9879\u76ee\u3002\u7f3a\u70b9\u662f\u914d\u7f6e\u8f83\u4e3a\u7e41\u7410\uff0c\u9700\u8981\u638c\u63e1Gulp\u7684\u57fa\u672c\u4f7f\u7528\u65b9\u6cd5\u3002<\/p>\n

3. Webpack<\/p>\n

Webpack\u662f\u4e00\u79cd\u6a21\u5757\u6253\u5305\u5de5\u5177\uff0c\u901a\u8fc7Webpack\u53ef\u4ee5\u5c06\u591a\u4e2aHTML\u6587\u4ef6\u6253\u5305\u6210\u4e00\u4e2a\u6216\u5c11\u91cfHTML\u6587\u4ef6\uff0c\u540c\u65f6\u8fd8\u53ef\u4ee5\u5b9e\u73b0\u4ee3\u7801\u538b\u7f29\u3001\u6587\u4ef6\u5408\u5e76\u7b49\u529f\u80fd\u3002\u4f7f\u7528Webpack\u8fdb\u884cHTML\u6253\u5305\u7684\u5b9e\u73b0\u65b9\u6cd5\u5982\u4e0b\uff1a<\/p>\n

\uff081\uff09\u5b89\u88c5Webpack<\/p>\n

\u5728\u547d\u4ee4\u884c\u7a97\u53e3\u4e2d\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n

“`<\/p>\n

npm install webpack -g<\/p>\n

“`<\/p>\n

\uff082\uff09\u521b\u5efaWebpack\u914d\u7f6e\u6587\u4ef6<\/p>\n

\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2awebpack.config.js\u6587\u4ef6<\/p>\n

<\/figure>\n<\/p>\n

\uff0c\u5185\u5bb9\u5982\u4e0b\uff1a<\/p>\n

“`<\/p>\n

const path = require(‘path’);<\/p>\n

module.exports = {<\/p>\n

entry: ‘.\/src\/index.html’,<\/p>\n

output: {<\/p>\n

filename: ‘index.html’,<\/p>\n

path: path.resolve(__dirname, ‘dist’)<\/p>\n

}<\/p>\n

};<\/p>\n

“`<\/p>\n

\uff083\uff09\u8fd0\u884cWebpack\u6253\u5305\u547d\u4ee4<\/p>\n

\u5728\u547d\u4ee4\u884c\u7a97\u53e3\u4e2d\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n

“`<\/p>\n

webpack<\/p>\n

“`<\/p>\n

\u6267\u884c\u5b8c\u6bd5\u540e\uff0c\u4f1a\u5728dist\u76ee\u5f55\u4e0b\u751f\u6210\u4e00\u4e2aindex.html\u6587\u4ef6\uff0c\u5176\u4e2d\u5305\u542bsrc\u76ee\u5f55\u4e0b\u6240\u6709HTML\u6587\u4ef6\u7684\u5185\u5bb9\u3002<\/p>\n

Webpack\u7684\u4f18\u70b9\u662f\u529f\u80fd\u5f3a\u5927\uff0c\u53ef\u4ee5\u5b9e\u73b0\u6a21\u5757\u6253\u5305\u3001\u4ee3\u7801\u538b\u7f29\u3001\u6587\u4ef6\u5408\u5e76\u7b49\u529f\u80fd\uff0c\u9002\u7528\u4e8e\u5927\u578b\u9879\u76ee\u3002\u7f3a\u70b9\u662f\u914d\u7f6e\u8f83\u4e3a\u590d\u6742\uff0c\u9700\u8981\u638c\u63e1Webpack\u7684\u57fa\u672c\u4f7f\u7528\u65b9\u6cd5\u3002<\/p>\n

\u603b\u7ed3<\/p>\n

\u524d\u7aefHTML\u6253\u5305\u662f\u4e00\u79cd\u4f18\u5316\u7f51\u7ad9\u6027\u80fd\u7684\u6709\u6548\u65b9\u5c06html\u6587\u4ef6\u8f6c\u6210\u684c\u9762exe\u7a0b\u5e8f<\/a>\u5f0f\uff0c\u53ef\u4ee5\u51cf\u5c11\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u548cHTTP\u8bf7\u6c42\u6b21\u6570\u3002\u5b9e\u73b0\u65b9\u5f0f\u6709\u624b\u52a8\u5408\u5e76\u3001Gulp\u548cWebpack\u4e09\u79cd\uff0c\u9009\u62e9\u5408\u9002\u7684\u65b9\u5f0f\u53ef\u4ee5\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u548c\u7f51\u7ad9\u6027\u80fd\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

\u524d\u7aefHTML\u6253\u5305\uff0c\u662f\u6307\u5c06\u591a\u4e2aHTML\u6587\u4ef6\u5408\u5e76\u6210\u4e00\u4e2a\u6216\u5c11\u91cfHTML\u6587\u4ef6\u7684\u8fc7\u7a0b\uff0c\u4ee5\u51cf\u5c11\u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u548cHTTP\u8bf7\u6c42\u6b21\u6570\uff0c\u63d0\u9ad8\u7f51\u7ad9\u6027\u80fd\u3002\u672c\u6587\u5c06\u4ece\u539f\u7406\u548c\u8be6\u7ec6\u4ecb\u7ecd\u4e24\u4e2a\u65b9\u9762\u8fdb\u884c\u8bb2\u89e3\u3002\u4e00\u3001\u539f\u7406\u524d\u7aefHTML\u6253\u5305\u7684\u539f\u7406<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[651,11204,33,40127,133],"topic":[],"class_list":["post-52201","post","type-post","status-publish","format-standard","hentry","category-kaifaexe","tag-651","tag-exedeb","tag-33","tag-40127","tag-133"],"_links":{"self":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/posts\/52201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/comments?post=52201"}],"version-history":[{"count":1,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/posts\/52201\/revisions"}],"predecessor-version":[{"id":52225,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/posts\/52201\/revisions\/52225"}],"wp:attachment":[{"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/media?parent=52201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/categories?post=52201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/tags?post=52201"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.edabao.net\/dabao\/wp-json\/wp\/v2\/topic?post=52201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}