{"id":341753,"date":"2022-11-25T21:00:07","date_gmt":"2022-11-25T21:00:07","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=341753"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=341753","title":{"rendered":"<span>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Webpack 5<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 Webpack 5 \u0438 \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Pug, Sass, JavaScript \u0438 Markdown<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/fd6\/13a\/527\/fd613a52709b72d46915d92f324ae6b4.jpg\" width=\"693\" height=\"270\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fd6\/13a\/527\/fd613a52709b72d46915d92f324ae6b4.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p><a href=\"#%D0%BE-%D1%87%D0%B5%D0%BC-%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F\" rel=\"noopener noreferrer nofollow\">\u041e \u0447\u0435\u043c \u0441\u0442\u0430\u0442\u044c\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B1%D1%8B%D1%81%D1%82%D1%80%D1%8B%D0%B9-%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA-webpack\" rel=\"noopener noreferrer nofollow\">\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a webpack<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-html-webpack-plugin\" rel=\"noopener noreferrer nofollow\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 html-webpack-plugin<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-devserver\" rel=\"noopener noreferrer nofollow\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 DevServer<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B2-webpack-%D1%82%D0%BE%D1%87%D0%BA%D0%B8-%D0%B2%D1%85%D0%BE%D0%B4%D0%B0-%D0%B8-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432 Webpack \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0432\u044b\u0445\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%82%D0%BE%D1%87%D0%BA%D0%B0-%D0%B2%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%82%D0%BE%D1%87%D0%BA%D0%B0-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0422\u043e\u0447\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F-%D0%BE%D1%87%D0%B8%D1%81%D1%82%D0%BA%D0%B0-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D1%80%D0%B5%D0%B6%D0%B8%D0%BC%D0%B0-production-%D0%B2-webpack\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0435\u0436\u0438\u043c\u0430 production \u0432 webpack<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#babel\" rel=\"noopener noreferrer nofollow\">Babel<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0-pug\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430 Pug<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9-%D0%B2-webpack\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0438\u043b\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9-%D0%B2-webpack\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9\" rel=\"noopener noreferrer nofollow\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81%D0%B0-markdown-%D0%B8-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-md-%D0%B2-pug\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 Markdown \u0438 \u0444\u0430\u0439\u043b\u043e\u0432 .md \u0432 Pug<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D0%BE%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D0%B8-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D0%B5-%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D1%8B-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8-webpack\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 webpack<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%BE-%D1%87%D0%B5%D0%BC-%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F\" id=\"\u043e-\u0447\u0435\u043c-\u0441\u0442\u0430\u0442\u044c\u044f\"><\/a><\/p>\n<h3>\u041e \u0447\u0435\u043c \u0441\u0442\u0430\u0442\u044c\u044f<\/h3>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 Webpack 5. \u0421\u043b\u043e\u0432\u043e &#171;\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e&#187; \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442, \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 &#8212; \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e &#171;\u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c&#187;, \u043d\u043e \u0438 &#171;\u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0430\u0434\u043e&#187;.<\/p>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0436\u0435\u0442, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0441\u0430\u0439\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b: Pug, Sass, JavaScript \u0438 Markdown.<\/p>\n<ul>\n<li>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Pug \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 HTML.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 Sass \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u0438\u043b\u0438 CSS.<\/p>\n<\/li>\n<li>\n<p>\u042f\u0437\u044b\u043a JavaScript \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0441\u0431\u043e\u0440\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442 \u0441\u0442\u0430\u0440\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 Markdown \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u0430\u0439\u0442\u0430. \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 Markdown \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 HTML.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u0432\u043e\u0438\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 React \u0438\u043b\u0438 Vue, \u0430 \u0442\u0430\u043a\u0436\u0435, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c TypeScript.<\/p>\n<p><a class=\"anchor\"><\/a><a class=\"anchor\" name=\"%D0%B1%D1%8B%D1%81%D1%82%D1%80%D1%8B%D0%B9-%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA-webpack\" id=\"\u0431\u044b\u0441\u0442\u0440\u044b\u0439-\u0437\u0430\u043f\u0443\u0441\u043a-webpack\"><\/a><\/p>\n<h3>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 <a href=\"https:\/\/nodejs.org\/\" rel=\"noopener noreferrer nofollow\">Node.js<\/a>.<\/p>\n<p>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 Ubuntu 20.04, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0441\u0440\u0435\u0434\u0430 NodeJS v16.17.1 \u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 NPM v8.15.0, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0422\u0435\u0440\u043c\u0438\u043d\u0430\u043b, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 (\u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430) \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 FireFox v105.0. \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0430\u0432\u0442\u043e\u0440, \u0443 \u0432\u0430\u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"bash\">mkdir my-project<\/code><\/pre>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0440\u0430\u0431\u043e\u0447\u0438\u043c:<\/p>\n<pre><code class=\"bash\">cd my-project<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <code>my-project<\/code> \u0438 \u0432\u0441\u0435 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0431\u044b\u043b \u0437\u0430\u043a\u0440\u044b\u0442, \u0442\u043e \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443: <code>cd my-project<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u0430 <a href=\"https:\/\/git-scm.com\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0439 Git<\/a>, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0434\u0432\u0430 \u0448\u0430\u0433\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Git:<\/p>\n<pre><code class=\"bash\">git init<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>.git<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b git-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u0432 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>.git<\/code> \u043d\u0430\u0436\u043c\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u043a\u043b\u0430\u0432\u0438\u0448 <code>Ctrl+H<\/code>.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c, \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u0444\u0430\u0439\u043b <code>.gitignore<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"bash\">touch .gitignore<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>.gitignore<\/code> \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"bash\">node_modules<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0434\u043b\u044f Git &#8212; \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules<\/code>, \u043d\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439.<\/p>\n<blockquote>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0432\u0441\u0451, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438. \u042d\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0438, \u043d\u043e \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u0422\u0430\u043a \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0443 \u0432\u0430\u0441 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043a\u043e\u0434 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c. \u0417\u0430\u043f\u043e\u043c\u043d\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0440\u0430\u0432\u043a\u0443 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u043d\u0430\u0436\u043c\u0438 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 <code>Ctrl+S<\/code>. \u042d\u0442\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435.<\/p>\n<\/blockquote>\n<p>\u0421 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 Git \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c. \u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c, \u0438\u043d\u043e\u0433\u0434\u0430, \u0430 \u043b\u0443\u0447\u0448\u0435, \u043f\u043e\u0447\u0430\u0449\u0435, \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0438\u0442\u044b.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c npm, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npm init -y<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430 \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0446\u0438\u044f <code>-y<\/code>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 <a href=\"https:\/\/docs.npmjs.com\/cli\/v8\/configuring-npm\/package-json\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e npm<\/a>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <code>webpack<\/code> \u0438 <code>webpack-cli<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 webpack \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code>npm i -D webpack webpack-cli<\/code><\/pre>\n<p>\u041e\u043f\u0446\u0438\u044f <code>-D<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0435\u0436\u0438\u043c\u0430 <code>development<\/code> \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435. \u0412 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u044d\u0442\u0438 \u043f\u0430\u043a\u0435\u0442\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <code>\"devDependencies\": {...}<\/code>.<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules<\/code> \u0438 \u0444\u0430\u0439\u043b <code>package-lock.json<\/code>. \u041a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u042d\u0442\u043e\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0447\u0442\u043e \u0438 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.gitignore<\/code>. \u0424\u0430\u0439\u043b <code>package-lock.json<\/code> \u0445\u0440\u0430\u043d\u0438\u0442 \u0437\u0430\u043f\u0438\u0441\u0438 \u043e \u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src<\/code>:<\/p>\n<pre><code class=\"bash\">mkdir src<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src<\/code> \u0434\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>src<\/code> \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>index.js<\/code>:<\/p>\n<pre><code class=\"bash\">touch src\/index.js<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>src\/index.js<\/code> \u0438 \u0432\u0432\u0435\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">function component(text) {   const element = document.createElement('h1');   element.textContent = text;   return element; }  document.body.prepend(component('\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack'));<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u043c <code>package.json<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u043e\u043b\u0435 <code>\"scripts\"<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 <code>dev<\/code>:<\/p>\n<pre><code class=\"json\">\"scripts\": {   \"dev\": \"webpack --mode development\",   \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\" }<\/code><\/pre>\n<p><code>dev<\/code> &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>webpack --mode development<\/code>. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <code>\"scripts\"<\/code> \u0444\u0430\u0439\u043b\u0430 <code>package.json<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>npm run<\/code>. \u0422\u0430\u043a, \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432\u044b\u0448\u0435, \u0432\u0432\u0435\u0434\u0435\u043c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run dev<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>main.js<\/code>. \u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 <code>main.js<\/code> \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c <code>src\/index.js<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u044f, \u0445\u043e\u0442\u044f \u043e\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435.<\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>npm run dev<\/code> \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 webpack \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <code>development<\/code>. \u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, webpack \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <code>webpack.config.js<\/code>. \u0422\u0430\u043a \u043a\u0430\u043a, \u0444\u0430\u0439\u043b \u043c\u044b \u0435\u0449\u0451 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u0442\u043e webpack \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u00a0Webpack \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430\u00a0<code>src\/index.js<\/code>\u00a0\u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u00a0<code>dist\/main.js<\/code>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u043c\u043e\u0442\u0440\u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0<a href=\"#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B2-webpack-%D1%82%D0%BE%D1%87%D0%BA%D0%B8-%D0%B2%D1%85%D0%BE%D0%B4%D0%B0-%D0%B8-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432 webpack \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0432\u044b\u0445\u043e\u0434\u0430<\/a>. <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c HTML \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 <code>main.js<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c:<\/p>\n<pre><code>touch dist\/index.html<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>dist\/index.html<\/code> \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html>   &lt;head>     &lt;meta charset=\"utf-8\" \/>     &lt;title>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack&lt;\/title>   &lt;\/head>   &lt;body>     &lt;p>\u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0432\u0440\u0443\u0447\u043d\u0443\u044e&lt;\/p>     &lt;script src=\"main.js\">&lt;\/script>   &lt;\/body> &lt;\/html><\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code>my-project   |-dist     index.html     main.js   |+node_modules   |-src     index.js   |+.git   package-lock.json   package.json   .gitignore<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <code>dist\/index.html<\/code> \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack \u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0432\u0440\u0443\u0447\u043d\u0443\u044e<\/code><\/pre>\n<p><a class=\"anchor\"><\/a><a class=\"anchor\" name=\"%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-html-webpack-plugin\" id=\"\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430-\u0438-\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430-html-webpack-plugin\"><\/a><\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 html-webpack-plugin<\/h3>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435, \u0444\u0430\u0439\u043b <code>index.html<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c webpack, \u0447\u0442\u043e\u0431\u044b HTML-\u0444\u0430\u0439\u043b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>html-webpack-plugin<\/code>.<\/p>\n<p>\u0418\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d:<\/p>\n<pre><code>npm i -D html-webpack-plugin<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c html-webpack-plugin. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c:<\/p>\n<pre><code>touch webpack.config.js<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path');  module.exports = {   plugins: [     new HtmlWebpackPlugin({       template: path.join(__dirname, 'src', 'template.html'),       filename: 'index.html',     }),   ], };<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0444\u0430\u0439\u043b\u0430 <code>webpack.config.js<\/code> \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435:<\/p>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 <code>html-webpack-plugin<\/code> \u0438 <code>path<\/code> \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u044d\u0442\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>HtmlWebpackPlugin<\/code> \u0438 <code>path<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><code>module.exports = {}<\/code> &#8212; \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <code>html-webpack-plugin<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>new HtmlWebpackPlugin<\/code> \u0441 \u0434\u0432\u0443\u043c\u044f \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438: <code>template<\/code> &#8212; \u043f\u0443\u0442\u044c \u043a \u0432\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0438 <code>filename<\/code> &#8212; \u0438\u043c\u044f \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>template<\/code> \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0443\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u043b\u043e\u0436\u0435\u043d \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0412 Linux \u0438 macOS \u043f\u0443\u0442\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a: <code>\/path\/to\/template.html<\/code>. \u0412 Windows \u043f\u0443\u0442\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0438\u043d\u0430\u0447\u0435: <code>C:\\path\\to\\template.html<\/code>. \u0412 Node.js \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c <code>path<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f. \u041c\u043e\u0434\u0443\u043b\u044c <code>path<\/code> \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0444\u0430\u0439\u043b\u0430 <code>webpack.config.js<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u043b\u0438 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>template<\/code>. \u041c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/nodejs.org\/dist\/latest-v16.x\/docs\/api\/path.html#pathjoinpaths\" rel=\"noopener noreferrer nofollow\">path.join<\/a> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0443\u0442\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0443\u0442\u0438 \u0434\u043b\u044f \u043c\u0435\u0442\u043e\u0434\u0430 <code>path.join<\/code> \u0437\u0430\u0434\u0430\u043b\u0438 \u0442\u0440\u0435\u043c\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <code>__dirname<\/code>, <code>'src'<\/code> \u0438 <code>'template.html'<\/code>. \u0415\u0441\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u041e\u0421 Linux, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 <code>template: path.join(__dirname, 'src', 'template.html')<\/code> \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435 &#8212; <code>template: '.\/src\/template.html'<\/code><\/p>\n<ul>\n<li>\n<p><code>__dirname<\/code> &#8212; \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443 \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u0443 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443, \u0442. \u0435. \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 <code>__dirname<\/code> &#8212; \u044d\u0442\u043e \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <code>__dirname<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <code>path.join<\/code> \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/nodejs.org\/dist\/latest-v16.x\/docs\/api\/path.html#pathresolvepaths\" rel=\"noopener noreferrer nofollow\">path.resolve<\/a>.<\/p>\n<p>\u0424\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <a href=\"https:\/\/webpack.js.org\/configuration\/#options\" rel=\"noopener noreferrer nofollow\">webpack.config.js<\/a> \u043d\u0443\u0436\u0435\u043d \u0432\u0435\u0431\u043f\u0430\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0442\u043e\u043c \u0438\u043b\u0438 \u0438\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435. Webpack \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442, \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043b\u0435\u0436\u0438\u0442 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>webpack.config.js<\/code>. \u0415\u0441\u043b\u0438 \u0438\u043c\u044f \u0438\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u0440\u0443\u0433\u043e\u0435, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0446\u0438\u0438 <code>--config<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"json\">\"scripts\": {   \"serve\": \"webpack serve --open --mode development --config dev\/serve.config.js\" }<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u043e \u043c\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c.<\/p>\n<p>\u0418\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/template.html<\/code>:<\/p>\n<pre><code>touch src\/template.html<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0444\u0430\u0439\u043b <code>src\/template.html<\/code> \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0442\u0430\u043a\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html>   &lt;head>     &lt;meta charset=\"utf-8\" \/>     &lt;title>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack&lt;\/title>   &lt;\/head>   &lt;body>     &lt;p>\u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c html-webpack-plugin&lt;\/p>   &lt;\/body> &lt;\/html><\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0443\u0434\u0430\u043b\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code> \u0441 \u0434\u0432\u0443\u043c\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438. \u0412 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run dev<\/code><\/pre>\n<p>\u041a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code> \u0441\u043d\u043e\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u043d, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0444\u0430\u0439\u043b\u044b <code>index.html<\/code> \u0438 <code>main.js<\/code>. \u0415\u0441\u043b\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0444\u0430\u0439\u043b <code>dist\/index.html<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c:<\/p>\n<pre><code>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack \u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c html-webpack-plugin<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043b\u0430\u0433\u0438\u043d html-webpack-plugin \u0441\u0434\u0435\u043b\u0430\u043b \u0434\u0432\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<ul>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u043b \u0444\u0430\u0439\u043b <code>dist\/index.html<\/code> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>src\/template.html<\/code><\/p>\n<\/li>\n<li>\n<p>\u0432 \u0444\u0430\u0439\u043b\u0435 <code>dist\/index.html<\/code> \u0443\u043a\u0430\u0437\u0430\u043b \u0444\u0430\u0439\u043b \u0441\u043a\u0440\u0438\u043f\u0442\u0430 <\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 webpack \u0441\u043e\u0431\u0440\u0430\u043d \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0443:<\/p>\n<ol>\n<li>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 <code>src<\/code><\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435:<\/p>\n<\/li>\n<\/ol>\n<pre><code>npm run dev<\/code><\/pre>\n<ol start=\"4\">\n<li>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0444\u0430\u0439\u043b <code>dist\/index.html<\/code>, \u043b\u0438\u0431\u043e \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439, \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0435\u0441\u043b\u0438 \u043d\u0430\u0434\u043e, \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u043c \u0448\u0430\u0433\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430.<\/p>\n<\/li>\n<\/ol>\n<p><a class=\"anchor\" name=\"%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-DevServer\" id=\"\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430-\u0438-\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430-DevServer\"><\/a><\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 DevServer<\/h3>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>npm run dev<\/code> \u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0414\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441.<\/p>\n<p>\u0412 webpack \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0442\u0440\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/webpack.js.org\/guides\/development\/#using-watch-mode\" rel=\"noopener noreferrer nofollow\">\u0420\u0435\u0436\u0438\u043c Watch<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/webpack.js.org\/guides\/development\/#using-webpack-dev-server\" rel=\"noopener noreferrer nofollow\">webpack-dev-server<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/webpack.js.org\/guides\/development\/#using-webpack-dev-middleware\" rel=\"noopener noreferrer nofollow\">webpack-dev-middleware<\/a><\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0434\u0435\u0441\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u0432\u0435\u0431 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c webpack-dev-server:<\/p>\n<pre><code>npm i -D webpack-dev-server<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0437\u043d\u0430\u043a\u0430\u043c\u0438 <code>+<\/code>):<\/p>\n<pre><code class=\"javascript\">  const HtmlWebpackPlugin = require('html-webpack-plugin');   const path = require('path');    module.exports = {     plugins: [       new HtmlWebpackPlugin({         template: path.join(__dirname, 'src', 'template.html'),         filename: 'index.html',       }),     ], +   devServer: { +     watchFiles: path.join(__dirname, 'src'), +     port: 9000, +   },   };<\/code><\/pre>\n<p>\u0414\u043b\u044f <code>devServer<\/code> \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<ul>\n<li>\n<p><code>watchFiles<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src<\/code>, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0442\u0438\u0441\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u0435\u0431 \u0441\u0435\u0440\u0432\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p><code>port<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0440\u0442 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e &#8212; localhost:8080.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432\u0435\u0431 \u0441\u0435\u0440\u0432\u0435\u0440 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f CLI \u0441\u043a\u0440\u0438\u043f\u0442 &#171;serve&#187; \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>:<\/p>\n<pre><code class=\"json\">{   \"scripts\": { +   \"serve\": \"webpack serve --open --mode development\",     \"dev\": \"webpack --mode development\",     \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"   } }<\/code><\/pre>\n<p><code>serve<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0435\u0431 \u0441\u0435\u0440\u0432\u0435\u0440. <code>--open<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. <code>--mode development<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u0435\u0436\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0443\u0434\u0430\u043b\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0430 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:9000\/\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:9000\/<\/a> \u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u043e\u0436\u0435, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437:<\/p>\n<pre><code>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack \u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c html-webpack-plugin<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f, \u0442\u043e \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:9000\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:9000<\/a><\/p>\n<p>\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>. \u0422\u043e\u0433\u0434\u0430 \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0435\u0440\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435? DevServer \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434, \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u043f\u0430\u043c\u044f\u0442\u044c.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0444\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code>my-project   |-node_modules   |-src     index.js     template.html   |+.git   package-lock.json   package.json   webpack.config.js   .gitignore<\/code><\/pre>\n<p>\u0412\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u044c \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 Ctrl+C.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B2-webpack-%D1%82%D0%BE%D1%87%D0%BA%D0%B8-%D0%B2%D1%85%D0%BE%D0%B4%D0%B0-%D0%B8-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B0\" id=\"\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430-\u0432-webpack-\u0442\u043e\u0447\u043a\u0438-\u0432\u0445\u043e\u0434\u0430-\u0438-\u0432\u044b\u0445\u043e\u0434\u0430\"><\/a><\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432 Webpack \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0432\u044b\u0445\u043e\u0434\u0430<\/h3>\n<p>\u0412 Webpack&#8217;\u0435 \u0441 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0432\u044b\u0445\u043e\u0434\u0430, \u0430 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<ul>\n<li>\n<p>\u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 &#8212; <code>.\/src\/index.js<\/code><\/p>\n<\/li>\n<li>\n<p>\u0442\u043e\u0447\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430 &#8212; <code>.\/dest\/main.js<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0439, \u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0442\u043e \u0431\u0435\u0437 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0442\u043e\u0447\u0435\u043a \u0432\u0445\u043e\u0434\u0430 \u0438 \u0432\u044b\u0445\u043e\u0434\u0430 \u043d\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c.<\/p>\n<h4>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/h4>\n<p><strong>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/strong> &#8212; \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Webpack \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0432\u044b\u043c \u0438 \u0435\u0441\u043b\u0438 \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0442\u043e \u044d\u0442\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0442\u043e\u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0443\u043a\u0430\u0436\u0435\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>entry<\/code>:<\/p>\n<pre><code class=\"javascript\">module.exports = {   entry: path.join(__dirname, 'src', 'index.js'), };<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>entry<\/code>. \u0422\u0430\u043a\u0436\u0435, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0447\u0435\u043a \u0432\u0445\u043e\u0434\u0430. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438 <a href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u0434\u0430<\/a> \u043d\u0430 \u0447\u0430\u0441\u0442\u0438. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 <a href=\"https:\/\/webpack.js.org\/concepts\/entry-points\/\" rel=\"noopener noreferrer nofollow\">Entry Points<\/a> \u0438 <a href=\"https:\/\/webpack.js.org\/configuration\/entry-context\/\" rel=\"noopener noreferrer nofollow\">Entry and Context<\/a>.<\/p>\n<h4>\u0422\u043e\u0447\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430<\/h4>\n<p><strong>\u0422\u043e\u0447\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430<\/strong> &#8212; \u043a\u0430\u0442\u0430\u043b\u043e\u0433, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Webpack \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430.<\/p>\n<p>\u0422\u043e\u0447\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>webpack.config.js<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>output<\/code>:<\/p>\n<pre><code class=\"javascript\">module.exports = {   output: {     path: path.join(__dirname, 'dist'),     filename: 'index.[contenthash].js',   }, };<\/code><\/pre>\n<p>\u0433\u0434\u0435:<\/p>\n<ul>\n<li>\n<p><code>[contenthash]<\/code> &#8212; \u0448\u0430\u0431\u043b\u043e\u043d, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u0435\u0448, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u0425\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u043c\u044f \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u042d\u0442\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0445\u0435\u0448 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f, \u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0435\u0440\u0435\u0442 \u043d\u0435 \u0441\u0442\u0430\u0440\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u0437 \u043a\u0435\u0448\u0430, \u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. 20 \u0437\u043d\u0430\u043a\u043e\u0432 \u0445\u0435\u0448\u0430 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u043e \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: [contenthash:8]. \u0425\u0435\u0448 \u0431\u0443\u0434\u0435\u0442 \u0434\u043b\u0438\u043d\u043e\u0439 8 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0445\u0435\u0448\u0435\u0439 \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/medium.com\/@sahilkkrazy\/hash-vs-chunkhash-vs-contenthash-e94d38a32208\" rel=\"noopener noreferrer nofollow\">Hash vs chunkhash vs ContentHash<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0442\u043e\u0447\u043a\u0430\u0445 \u0432\u044b\u0445\u043e\u0434\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 <a href=\"https:\/\/webpack.js.org\/concepts\/output\/\" rel=\"noopener noreferrer nofollow\">concepts\/output<\/a> \u0438 <a href=\"https:\/\/webpack.js.org\/configuration\/output\/\" rel=\"noopener noreferrer nofollow\">configuration\/output<\/a>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path');  module.exports = {   entry: path.join(__dirname, 'src', 'index.js'),   output: {     path: path.join(__dirname, 'dist'),     filename: 'index.[contenthash].js',   },   plugins: [     new HtmlWebpackPlugin({       template: path.join(__dirname, 'src', 'template.html'),       filename: 'index.html',     }),   ],   devServer: {     watchFiles: path.join(__dirname, 'src'),     port: 9000,   }, };<\/code><\/pre>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043a\u043b\u0430\u0432\u0438\u0448\u0430\u043c\u0438 <code>Ctrl+C<\/code> \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run dev<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430: <code>index.html<\/code> \u0438 <code>index.[hash].js<\/code>. \u0412\u0442\u043e\u0440\u043e\u0439 \u0444\u0430\u0439\u043b \u0440\u0430\u043d\u044c\u0448\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f <code>main.js<\/code>. \u041a\u043e\u0434 \u0432 \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430 &#8212; \u0445\u0435\u0448, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F-%D0%BE%D1%87%D0%B8%D1%81%D1%82%D0%BA%D0%B0-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" id=\"\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f-\u043e\u0447\u0438\u0441\u0442\u043a\u0430-\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432\"><\/a><\/p>\n<h3>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0432\u0435\u0431\u043f\u0430\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 dist. \u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442 \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c <a href=\"https:\/\/github.com\/gregnb\/filemanager-webpack-plugin\" rel=\"noopener noreferrer nofollow\">filemanager-webpack-plugin<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c filemanager-webpack-plugin:<\/p>\n<pre><code>npm i -D filemanager-webpack-plugin<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c, \u0432 \u0444\u0430\u0439\u043b\u0435 webpack.config.js \u0434\u043e\u0431\u0430\u0432\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">  const HtmlWebpackPlugin = require('html-webpack-plugin');   const path = require('path'); + const FileManagerPlugin = require('filemanager-webpack-plugin');    module.exports = {     ...     plugins: [       new HtmlWebpackPlugin({         ...       }), +     new FileManagerPlugin({ +       events: { +         onStart: { +           delete: ['dist'], +         }, +       }, +     }),     ],     devServer: {       ...     },   };<\/code><\/pre>\n<p>\u041a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>, \u0435\u0441\u043b\u0438 \u0431\u044b\u0442\u044c \u0442\u043e\u0447\u043d\u044b\u043c, \u043d\u0435 \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f, \u0430 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f. \u041f\u043b\u0430\u0433\u0438\u043d <code>filemanager-webpack-plugin<\/code> \u043c\u043e\u0436\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c, \u0430\u0440\u0445\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0441\u0431\u043e\u0440\u043a\u0438 <code>onStart<\/code> \u0438 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 <code>onEnd<\/code>. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u0434\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0430\u043a\u0435\u0442\u0430 <code>filemanager-webpack-plugin<\/code>, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:9000\/\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:9000\/<\/a> \u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u043e\u0436\u0435, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437:<\/p>\n<pre><code>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack \u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c html-webpack-plugin<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u043e \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 <code>dist<\/code>, \u0447\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u0430\u043a\u0435\u0442\u0430 <code>filemanager-webpack-plugin<\/code>.<\/p>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c DevServer, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043d\u0430\u0436\u043c\u0435\u043c <code>Ctrl+C<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D1%80%D0%B5%D0%B6%D0%B8%D0%BC%D0%B0-production-%D0%B2-webpack\" id=\"\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430-\u0440\u0435\u0436\u0438\u043c\u0430-production-\u0432-webpack\"><\/a><\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0435\u0436\u0438\u043c\u0430 production \u0432 webpack<\/h3>\n<p>\u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 webpack \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442 <code>\"build\"<\/code>:<\/p>\n<pre><code class=\"json\">  \"scripts\": {     \"serve\": \"webpack serve --open --mode development\",     \"dev\": \"webpack --mode development\", +   \"build\": \"webpack --mode production\",     \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"   },<\/code><\/pre>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430, \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run dev<\/code><\/pre>\n<p>O\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>dist\/index.[hash].js<\/code> \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u0435\u0433\u043e. \u0412\u0438\u0434\u0438\u043c \u043a\u0443\u0447\u0443 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432, \u0430 \u043a\u043e\u0434 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u043d\u0435 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435. \u0420\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 1418 \u0431\u0430\u0439\u0442.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 webpack \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <code>production<\/code>:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 <code>dist\/index.[hash].js<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u0430 \u043a\u043e\u0434 \u0441\u0436\u0430\u0442\u044b\u0439. \u0420\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 139 \u0431\u0430\u0439\u0442. \u042d\u0442\u0438\u043c \u0440\u0435\u0436\u0438\u043c production \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0440\u0435\u0436\u0438\u043c\u0430 development &#8212; \u043a\u043e\u0434 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f. \u0422\u043e \u0436\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0438 \u043a \u0444\u0430\u0439\u043b\u0443 <code>index.html<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 development \u043d\u0435 \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 282 \u0431\u0430\u0439\u0442\u0430, \u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 production \u0443\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0438 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0440\u0430\u0432\u0435\u043d 259 \u0431\u0430\u0439\u0442.<\/p>\n<p><a class=\"anchor\" name=\"babel\" id=\"babel\"><\/a><\/p>\n<h3>Babel<\/h3>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043d\u043e\u0432\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0432\u0441\u0435 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 JavaScript ES6-ES13. \u041d\u043e, \u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043c\u0438\u0440\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u044d\u0442\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 &#8212; \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c <a href=\"https:\/\/babeljs.io\/\" rel=\"noopener noreferrer nofollow\">Babel<\/a>. Babel &#8212; \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 JavaScript \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0442\u0443 \u0438\u043b\u0438 \u0438\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c <a href=\"https:\/\/caniuse.com\/\" rel=\"noopener noreferrer nofollow\">Can I use<\/a>. \u0415\u0441\u043b\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 <code>Can I use______?<\/code> \u0432\u0432\u0435\u0441\u0442\u0438 <code>es13<\/code>, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0436\u0438\u0434\u0430\u044e\u0442\u0441\u044f \u0432 13-\u043e\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0435 ECMAScript. \u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0438\u043b\u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<\/blockquote>\n<p>Babel \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 JavaScript ES6-ES13. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c. Babel \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 JavaScript \u043a\u043e\u0434 \u0432 ES5, \u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u044d\u0442\u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0443\u0436\u0435 \u043d\u0438\u043a\u0435\u043c \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b Babel \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u043f\u0430\u043a\u0435\u0442\u0430 <code>@babel\/core<\/code> \u0438 <code>@babel\/preset-env<\/code>, \u0430 \u0447\u0442\u043e\u0431\u044b Babel \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 Webpack \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a <code>babel-loader<\/code>. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u044d\u0442\u0438 \u0442\u0440\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code>npm i -D @babel\/core @babel\/preset-env babel-loader<\/code><\/pre>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0434\u043b\u044f Babel \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.babelrc<\/code>. \u0418\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b:<\/p>\n<pre><code>touch .babelrc<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c <code>.babelrc<\/code> \u0438 \u0432\u043d\u0435\u0441\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"json\">{   \"presets\": [     [       \"@babel\/preset-env\",       {         \"modules\": false       }     ]   ] }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f Babel:<\/p>\n<pre><code class=\"javascript\">  module.exports = {     entry: path.join(__dirname, 'src', 'index.js'),     output: {       ...     }, +   module: { +     rules: [ +       { +         test: \/\\.js$\/, +         use: 'babel-loader', +         exclude: \/node_modules\/, +       }, +     ], +   },     plugins: [       ...     ],     devServer: {       ...     },   };<\/code><\/pre>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 <code>module<\/code>, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u043e <code>rules<\/code>. \u0414\u043b\u044f \u0432\u0435\u0431\u043f\u0430\u043a\u0430 \u0444\u0430\u0439\u043b &#8212; \u044d\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c, \u0431\u0443\u0434\u044c \u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442, \u0441\u0442\u0438\u043b\u0438, \u0448\u0440\u0438\u0444\u0442 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0417\u0434\u0435\u0441\u044c, \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 (\u0447\u0438\u0442\u0430\u0439, \u0444\u0430\u0439\u043b\u043e\u0432) \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.js<\/code> webpack \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d <code>babel-loader<\/code>. \u041f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules<\/code>, \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>module.rules.exclude<\/code>.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443, \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>dist\/index.[hash].js<\/code> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">document.body.append((function(e){constt=document.createElement('h1');return (t.textContent='\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack'),t;})());<\/code><\/pre>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>dist\/index.[hash].js<\/code> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">(()=>{var e;document.body.append((\"\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack\",(e=document.createElement(\"h1\")).textContent=\"\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack\",e))})();<\/code><\/pre>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438, \u043d\u043e \u043a\u043e\u0434 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f. \u042d\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 Babel. \u0412\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u0434 \u043f\u043e\u0439\u043c\u0443\u0442 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 ES5 \u0438 \u0432\u044b\u0448\u0435.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0-pug\" id=\"\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435-\u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430-pug\"><\/a><\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430 Pug<\/h3>\n<p>\u041d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c HTML \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0443\u043c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430\u043c\u0438.<\/p>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442:<\/p>\n<ul>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0431\u043b\u043e\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u0434. \u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u043c\u043e\u0436\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 JSON. \u0422\u0430\u043a\u0436\u0435, \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b, \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0446\u0438\u043a\u043b\u044b, \u043a\u0430\u043a \u0432 \u044f\u0437\u044b\u043a\u0430\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <a href=\"https:\/\/pugjs.org\/\" rel=\"noopener noreferrer nofollow\">\u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Pug<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JavaScript \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0440\u0435\u0434\u0435 Node.js. \u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Pug \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u0445 \u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 HTML \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u0443\u0433\u043b\u043e\u0432\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0442\u0435\u0433\u043e\u0432. \u041f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Pug \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 HTML \u043a\u043e\u0434.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Pug \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 Webpack \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0444\u0430\u0439\u043b\u043e\u0432 <a href=\"https:\/\/www.npmjs.com\/package\/pug-loader\" rel=\"noopener noreferrer nofollow\">pug-loader<\/a>.<\/p>\n<blockquote>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a pug-loader \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Pug 3-\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439. \u041a\u043e\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u043d\u0443\u0436\u0435\u043d Pug 3, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f <a href=\"https:\/\/www.npmjs.com\/package\/pug-plugin\" rel=\"noopener noreferrer nofollow\">pug-plugin<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 Webpack 5 \u0438 Pug 3.  <\/p>\n<p>\u0421\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c pug-loader \u0434\u043b\u044f \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Pug, \u0438 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u043a\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0441\u0430\u043c\u0438 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u044e\u0442. \u042d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u0440 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u0435 \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u00a0<a href=\"https:\/\/jinv.ru\/Sozdanie-saytov\/pug-loader-i-pug3\/\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435 Pug 3, pug-loader \u0438 Webpack 5<\/a>.<\/p>\n<\/blockquote>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c pug \u0438 pug-loader<\/p>\n<pre><code>npm i -D pug pug-loader<\/code><\/pre>\n<p>\u0412\u0435\u0431\u043f\u0430\u043a\u0443 \u0443\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d <code>pug-plugin<\/code> \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.pug<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>webpack.config.js<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">  module.exports = {     entry: path.join(__dirname, 'src', 'index.js'),     output: {       ...     },     module: {       rules: [         {           test: \/\\.js$\/,           use: 'babel-loader',           exclude: \/node_modules\/,         }, +       { +          test: \/\\.pug$\/, +          loader: 'pug-loader', +       },       ],     },     plugins: [       new HtmlWebpackPlugin({ +       template: path.join(__dirname, 'src', 'template.pug'),         filename: 'index.html',       }),       new FileManagerPlugin({         ...       }),     ],     devServer: {       ...     },   };<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f <code>pug-loader<\/code> \u043c\u043e\u0434\u0443\u043b\u044c <code>HtmlWebpackPlugin<\/code> \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 <code>.pug<\/code>.<\/p>\n<p>\u0418\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/template.pug<\/code>:<\/p>\n<pre><code>touch src\/template.pug<\/code><\/pre>\n<p>\u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code>doctype html html(lang= 'ru')   head     meta(charset='utf-8')     title= '\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack'   body     p \u0424\u0430\u0439\u043b \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c Pug<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <code>src\/template.html<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u0443\u0434\u0430\u043b\u0438\u043c.<\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost:9000\/\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:9000\/<\/a>, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u0432\u0438\u0434\u0438\u043c:<\/p>\n<pre><code>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack \u0424\u0430\u0439\u043b \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c Pug<\/code><\/pre>\n<p>\u0418\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Pug \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e.\u00a0\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c DevServer, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043d\u0430\u0436\u043c\u0435\u043c <code>Ctrl+C<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9-%D0%B2-webpack\" id=\"\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430-\u0441\u0442\u0438\u043b\u0435\u0439-\u0432-webpack\"><\/a><\/p>\n<h3>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 webpack<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 <a href=\"https:\/\/sass-lang.com\/dart-sass\" rel=\"noopener noreferrer nofollow\">Sass<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 CSS \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 CSS-\u043a\u043e\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 SCSS \u0432 CSS. \u0417\u0430\u0442\u0435\u043c, \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0442\u044c \u044d\u0442\u043e\u0442 CSS \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0441\u0442\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 PostCSS, \u0447\u0442\u043e\u0431\u044b \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u043e \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b:<\/p>\n<pre><code>npm i -D sass-loader postcss-loader postcss-preset-env css-loader style-loader sass<\/code><\/pre>\n<p>\u0433\u0434\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" rel=\"noopener noreferrer nofollow\">sass-loader<\/a> &#8212; \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0444\u0430\u0439\u043b\u043e\u0432 Sass\/SCSS<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/sass\" rel=\"noopener noreferrer nofollow\">sass<\/a> \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 <code>.scss<\/code> \u0432 <code>.css<\/code>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/postcss-loader\" rel=\"noopener noreferrer nofollow\">postcss-loader<\/a> &#8212; \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a CSS \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0441\u0442-\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0414\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u0430\u043a\u0438\u043c \u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/postcss-preset-env\" rel=\"noopener noreferrer nofollow\">postcss-preset-env<\/a> &#8212; \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f PostCSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 CSS \u0432 \u043a\u043e\u0434, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" rel=\"noopener noreferrer nofollow\">css-loader<\/a> \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a CSS-\u0444\u0430\u0439\u043b\u043e\u0432<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/webpack.js.org\/loaders\/style-loader\/\" rel=\"noopener noreferrer nofollow\">style-loader<\/a> \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 DOM<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e CSS \u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 SCSS \u0438 PostCSS, \u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e <code>css-loader<\/code> \u0438 <code>style-loader<\/code>.<\/p>\n<\/blockquote>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/main.scss<\/code>:<\/p>\n<pre><code>touch src\/main.scss<\/code><\/pre>\n<p>\u0438 \u0432\u043d\u0435\u0441\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"css\">$font-size: 1rem; $font-color: lch(28 99 35);  html {   font-size: $font-size;   color: $font-color; }<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Sass \u0438 <a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/496966\/\" rel=\"noopener noreferrer nofollow\">LCH \u0446\u0432\u0435\u0442\u0430<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043d\u043e PostCSS \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u0438 \u0446\u0432\u0435\u0442\u0430 \u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u043b\u044e\u0431\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>src\/index.js<\/code> \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442 \u0444\u0430\u0439\u043b\u0430 main.scss:<\/p>\n<pre><code>import '.\/main.scss';<\/code><\/pre>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u044f\u0437\u044b\u043a\u043e\u043c JavaScript, \u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f webpack.<\/p>\n<p>\u0412 <code>webpack.config.js<\/code> \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0430\u043a\u0435\u0442\u044b:<\/p>\n<pre><code class=\"javascript\">...   module.exports = {     entry: ... ,     output: {       ...     },     module: {       rules: [         {           ...         },         {           test: \/\\.pug$\/,           loader: 'pug-loader',         }, +       { +         test: \/\\.(scss|css)$\/, +         use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'], +       },       ],     },     plugins: [       ...     ],     devServer: {       ...     },   };<\/code><\/pre>\n<p>\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0431\u043f\u0430\u043a\u0443, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c. \u041f\u0440\u0438\u0447\u0435\u043c, \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438\u0445 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0432\u0430\u0436\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u0435\u0431\u043f\u0430\u043a\u043e\u043c \u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043a \u043f\u0435\u0440\u0432\u043e\u043c\u0443:<\/p>\n<ul>\n<li>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c sass-loader, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b SCSS \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0432 CSS.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0442\u0435\u043c \u0438\u0434\u0435\u0442 postcss-loader, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/postcss.org\/\" rel=\"noopener noreferrer nofollow\">PostCSS<\/a> \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0441\u0430\u043c\u044b\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u0438\u0447\u0438 CSS (\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435) \u0432 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0422\u0430\u043a\u0436\u0435, PostCSS \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0435\u0440 \u0438 \u043b\u0438\u043d\u0442\u0435\u0440 \u043a CSS.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0434\u0435\u0442 css-loader, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u0443\u0435\u0442 <a class=\"mention\" href=\"\/users\/import\">@import<\/a> \u0438 url() \u0432\u043d\u0443\u0442\u0440\u0438 CSS.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0431\u0443\u0434\u0435\u0442 style-loader, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u0442 CSS \u0432 DOM<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f PostCSS \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0432 \u0444\u0430\u0439\u043b\u0435 <code>webpack.config.js<\/code> \u0442\u0430\u043a \u0438 \u0432 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <code>postcss.config.js<\/code>. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u0442\u043e\u0440\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>postcss.config.js<\/code><\/p>\n<pre><code>touch postcss.config.js<\/code><\/pre>\n<p>\u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">module.exports = {   plugins: {     'postcss-preset-env': {       browsers: 'last 2 versions',     },   }, };<\/code><\/pre>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<pre><code>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack \u0424\u0430\u0439\u043b \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c Pug<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0448 Ctrl+C \u0438 \u0432\u0432\u0435\u0434\u0435\u043c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>, \u0442\u043e \u043d\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c \u0444\u0430\u0439\u043b\u0430 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.css<\/code>. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0431\u0430\u043d\u0434\u043b\u0435 <code>dist\/index.[hash].js<\/code>.<\/p>\n<p>\u041c\u043e\u0436\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0441\u0442\u0438\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c JS \u0438 CSS, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/github.com\/webpack-contrib\/mini-css-extract-plugin\" rel=\"noopener noreferrer nofollow\">mini-css-extract-plugin<\/a>. \u041f\u043b\u0430\u0433\u0438\u043d \u0441\u043e\u0437\u0434\u0430\u0435\u0442 CSS-\u0444\u0430\u0439\u043b \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e JS-\u0444\u0430\u0439\u043b\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f CSS. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <code>mini-css-extract-plugin<\/code>:<\/p>\n<pre><code>npm i -D mini-css-extract-plugin<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>webpack.config.js<\/code>:<\/p>\n<pre><code class=\"javascript\">  const HtmlWebpackPlugin = require('html-webpack-plugin');   const path = require('path');   const FileManagerPlugin = require('filemanager-webpack-plugin'); + const MiniCssExtractPlugin = require('mini-css-extract-plugin');    module.exports = {     entry: path.join(__dirname, 'src', 'index.js'),     output: {       ...     },     module: {       rules: [         ... ,         {           test: \/\\.(scss|css)$\/,           use: [ +           MiniCssExtractPlugin.loader,             'css-loader',             'postcss-loader',             'sass-loader',           ],         },       ],     },     plugins: [       new HtmlWebpackPlugin({         ...       }),       new FileManagerPlugin({         ...       }), +     new MiniCssExtractPlugin({ +       filename: '[name].[contenthash].css', +     }),     ],     devServer: {       ...     },   };<\/code><\/pre>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e <code>'style-loader'<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>MiniCssExtractPlugin.loader<\/code>.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u0430, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>dist<\/code> \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>main.[hash].css<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9-%D0%B2-webpack\" id=\"\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439-\u0432-webpack\"><\/a><\/p>\n<h3>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 webpack<\/h3>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c webpack \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 PNG, JPG, GIF \u0438 SVG. \u0414\u043e webpack 5 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438\u00a0<a href=\"https:\/\/v4.webpack.js.org\/loaders\/raw-loader\/\" rel=\"noopener noreferrer nofollow\">raw-loader<\/a>,\u00a0<a href=\"https:\/\/v4.webpack.js.org\/loaders\/url-loader\/\" rel=\"noopener noreferrer nofollow\">url-loader<\/a>\u00a0\u0438\u00a0<a href=\"https:\/\/v4.webpack.js.org\/loaders\/file-loader\/\" rel=\"noopener noreferrer nofollow\">file-loader<\/a>. \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 webpack 5, \u0432\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0437\u043d\u0430\u0447\u043a\u043e\u0432, \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0442. \u0434. \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439\u00a0<a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/\" rel=\"noopener noreferrer nofollow\">Asset Modules<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <code>webpack.config.js<\/code>:<\/p>\n<pre><code class=\"javascript\">  module.exports = {     entry: path.join(__dirname, 'src', 'index.js'),     output: {       path: path.join(__dirname, 'dist'),       filename: 'index.[contenthash].js', +     assetModuleFilename: path.join('images', '[name].[contenthash][ext]'),     },     module: {       rules: [         ...         {           test: \/\\.(scss|css)$\/,           use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],         }, +       { +         test: \/\\.(png|jpg|jpeg|gif)$\/i, +         type: 'asset\/resource', +       }, +       { +         test: \/\\.svg$\/, +         type: 'asset\/resource', +         generator: { +           filename: path.join('icons', '[name].[contenthash][ext]'), +         }, +       },       ],     },     plugins: [       ...     ],     devServer: {       ...     },   };<\/code><\/pre>\n<ul>\n<li>\n<p><code>assetModuleFilename<\/code>\u00a0&#8212; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u00a0<code>images<\/code>\u00a0\u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u043c\u0435\u043d\u0438\u00a0<code>[name].[contenthash][ext]<\/code>\u00a0\u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0443\u00a0<code>type: 'asset\/resource'<\/code>. \u0415\u0441\u043b\u0438\u00a0<code>assetModuleFilename<\/code>\u00a0\u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d, \u0442\u043e, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u043c \u0431\u0443\u0434\u0435\u0442\u00a0<code>dist<\/code>, \u0430 \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442\u00a0<code>[contenthash][ext]<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>[ext]<\/code>\u00a0&#8212; \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430, \u0442\u0430\u043a\u0436\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u043e\u0447\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p><code>generator.filename<\/code>\u00a0&#8212; \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u00a0<code>assetModuleFilename<\/code>\u00a0\u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e asset-\u043f\u0440\u0430\u0432\u0438\u043b\u0430. \u0417\u0434\u0435\u0441\u044c, svg-\u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u00a0<code>dist\/icons<\/code><\/p>\n<\/li>\n<li>\n<p><code>type<\/code>\u00a0\u0438\u043c\u0435\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0442\u0438\u043f\u0430 asset:<\/p>\n<ul>\n<li>\n<p><code>asset\/resource<\/code>\u00a0&#8212; \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u00a0<a href=\"https:\/\/github.com\/webpack-contrib\/file-loader\" rel=\"noopener noreferrer nofollow\">file-loader<\/a>. \u041c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0443\u00a0<code>type: 'asset\/resource'<\/code>\u00a0\u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e\u00a0<code>assetModuleFilename<\/code>\u00a0\u043a\u0430\u0442\u0430\u043b\u043e\u0433.<\/p>\n<\/li>\n<li>\n<p><code>asset\/inline<\/code>\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u00a0<a href=\"https:\/\/v4.webpack.js.org\/loaders\/url-loader\/\" rel=\"noopener noreferrer nofollow\">url-loader<\/a>. \u041c\u043e\u0434\u0443\u043b\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0443\u00a0<code>type: 'asset\/inline'<\/code>, \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u0434 \u0431\u0430\u043d\u0434\u043b\u0430 \u043a\u0430\u043a\u00a0<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTTP\/Basics_of_HTTP\/Data_URLs\" rel=\"noopener noreferrer nofollow\">Data URL<\/a>.<\/p>\n<\/li>\n<li>\n<p><code>asset\/source<\/code>\u00a0\u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430\u00a0<a href=\"https:\/\/github.com\/webpack-contrib\/raw-loader\" rel=\"noopener noreferrer nofollow\">raw-loader<\/a>. \u041c\u043e\u0434\u0443\u043b\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0443\u00a0<code>type: 'asset\/source'<\/code>, \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 (\u043a\u0430\u043a \u0435\u0441\u0442\u044c).<\/p>\n<\/li>\n<li>\n<p><code>asset<\/code>\u00a0\u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442\u00a0<code>asset\/resource<\/code>\u00a0\u0438\u00a0<code>asset\/inline<\/code>. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043c\u043e\u0434\u0443\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435 8 \u041a\u0411, \u0442\u043e \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a\u00a0<code>asset\/resource<\/code>, \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 &#8212; \u043a\u0430\u043a\u00a0<code>asset\/inline<\/code>. \u0420\u0430\u0437\u043c\u0435\u0440 8 \u041a\u0411 \u0437\u0430\u0434\u0430\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u00a0<a href=\"https:\/\/webpack.js.org\/guides\/asset-modules\/#general-asset-type\" rel=\"noopener noreferrer nofollow\">parser.dataUrlCondition.maxSize<\/a>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src\/images<\/code> \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>image.png<\/code> \u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0435 &#8212; <code>logo.svg<\/code>.<\/p>\n<blockquote>\n<p>\u041c\u043e\u0433\u0443 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u0438\u0441\u0443\u043d\u043a\u0438. \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043f\u043e <a href=\"https:\/\/github.com\/injashkin\/webpack-template\/raw\/master\/src\/images\/image.png\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435<\/a>, \u043d\u0430\u0432\u0435\u0434\u0435\u043c \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043e\u043a, \u043d\u0430\u0436\u043c\u0435\u043c \u043f\u0440\u0430\u0432\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438, \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e &#171;\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a&#8230;&#187;, \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src\/images<\/code> \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430\u0436\u043c\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c. \u0422\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u0435\u043c \u0434\u043b\u044f <a href=\"https:\/\/github.com\/injashkin\/webpack-template\/blob\/master\/src\/images\/logo.svg\" rel=\"noopener noreferrer nofollow\">\u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a>.<\/p>\n<\/blockquote>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>src\/template.pug<\/code> \u0438 \u0434\u043e\u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u044b <code>.logo-png<\/code>, .<code>logo-svg<\/code> \u0438 \u0442\u0435\u0433\u0438 <code>img<\/code>:<\/p>\n<pre><code>doctype html html(lang= 'ru')   head     meta(charset='utf-8')     title= '\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack'   body     p \u0424\u0430\u0439\u043b \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c Pug     .logo-png       img.logo1(src=require('.\/images\/image.png') alt='\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 PNG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack')     .logo-svg       img.logo2(src=require('.\/images\/logo.svg'), alt='\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack')<\/code><\/pre>\n<p>\u0412 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>src<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>require<\/code>, \u0442. \u0435. \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c.<\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<p>\u0412 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0434\u0432\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a67\/446\/810\/a674468107258741ecb6c96c463863a4.png\" width=\"408\" height=\"222\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a67\/446\/810\/a674468107258741ecb6c96c463863a4.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0438\u043b\u0438, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0444\u0430\u0439\u043b\u0430\u00a0<code>src\/main.scss<\/code>\u00a0\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"css\">.logo1 {   width: 10em; } .logo2 {   width: 10em; }<\/code><\/pre>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u0442\u0430\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0438\u0440\u0438\u043d\u0443, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/166\/26f\/6b0\/16626f6b0ba6b0e3497b7333a4e2e2a9.png\" width=\"405\" height=\"231\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/166\/26f\/6b0\/16626f6b0ba6b0e3497b7333a4e2e2a9.png\"\/><figcaption><\/figcaption><\/figure>\n<p><a class=\"anchor\" name=\"%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9\" id=\"\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439\"><\/a><\/p>\n<h3>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h3>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u0421\u0436\u0430\u0442\u0438\u0435 \u0434\u0430\u0435\u0442 \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u0432 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0412\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430\u0442 SVG, \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. SVG &#8212; \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0430 SVG-\u0444\u0430\u0439\u043b\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0438\u043b\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u043b\u043a\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u0442\u043e SVG-\u0444\u0430\u0439\u043b\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443, \u0447\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u043c\u044b\u0435 \u043f\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445 JPEG \u0438\u043b\u0438 GIF. SVG-\u0444\u0430\u0439\u043b\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f. SVG \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <a href=\"https:\/\/github.com\/svg\/svgo\" rel=\"noopener noreferrer nofollow\">svgo<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0439 \u043a\u043e\u0434 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 SVG \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c svgo:<\/p>\n<pre><code>npm i -D svgo<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441\u0436\u0430\u0442\u0438\u0435 \u0434\u043b\u044f SVG \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 svgo \u0438 imagemin \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <a href=\"https:\/\/github.com\/imagemin\/imagemin-svgo\" rel=\"noopener noreferrer nofollow\">imagemin-svgo<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <a href=\"https:\/\/github.com\/imagemin\/imagemin\" rel=\"noopener noreferrer nofollow\">imagemin<\/a>. \u0414\u043b\u044f webpack \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 <a href=\"https:\/\/webpack.js.org\/plugins\/image-minimizer-webpack-plugin\/#optimize-with-imagemin\" rel=\"noopener noreferrer nofollow\">image-minimizer-webpack-plugin<\/a> &#8212; \u044d\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0438 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e imagemin.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d <code>image-minimizer-webpack-plugin<\/code> \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>imagemin<\/code>:<\/p>\n<pre><code>npm i -D image-minimizer-webpack-plugin imagemin<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c, \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b:<\/p>\n<pre><code>npm i -D imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">  ... + const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');    module.exports = {     entry: path.join(__dirname, 'src', 'index.js'),     output: {       ...     },     module: {       rules: [         ...       ],     },     plugins: [       ...     ],     devServer: {       ...     }, +   optimization: { +     minimizer: [ +       new ImageMinimizerPlugin({ +         minimizer: { +           implementation: ImageMinimizerPlugin.imageminMinify, +           options: { +             plugins: [ +               ['gifsicle', { interlaced: true }], +               ['jpegtran', { progressive: true }], +               ['optipng', { optimizationLevel: 5 }], +               ['svgo', { name: 'preset-default' }], +             ], +           }, +         }, +       }), +     ], +   },   };<\/code><\/pre>\n<p>\u0414\u043b\u044f <code>svgo<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>{ name: 'preset-default' }<\/code>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 <code>svgo<\/code> \u0447\u0438\u0442\u0430\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/svg\/svgo\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>src<\/code> \u0438 <code>dist<\/code>. \u0424\u0430\u0439\u043b <code>image.png<\/code> \u0431\u044b\u043b 4,9 \u041a\u0411, \u0430 \u0441\u0442\u0430\u043b 2,3 \u041a\u0411, \u0444\u0430\u0439\u043b <code>logo.svg<\/code> \u0431\u044b\u043b 11,4 \u041a\u0411, \u0430 \u0441\u0442\u0430\u043b 2,5 \u041a\u0411. \u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u0441\u0436\u0430\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81%D0%B0-markdown-%D0%B8-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-md-%D0%B2-pug\" id=\"\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435-\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430-markdown-\u0438-\u0444\u0430\u0439\u043b\u043e\u0432-md-\u0432-pug\"><\/a><\/p>\n<h3>\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 Markdown \u0438 \u0444\u0430\u0439\u043b\u043e\u0432 .md \u0432 Pug<\/h3>\n<p>Pug \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b HTML \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u041d\u043e \u0435\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0431\u044a\u0435\u043c\u044b \u0442\u0435\u043a\u0441\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0447\u0438\u0442\u0430\u0435\u0442\u0435, \u0442\u043e \u043d\u0438 Pug, \u043d\u0438 HTML \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u044b \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u0414\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443\u00a0<a href=\"https:\/\/daringfireball.net\/projects\/markdown\/\" rel=\"noopener noreferrer nofollow\">Markdown<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0434\u043e\u0431\u043d\u0430 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432, \u0438 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u0438\u0442\u043e\u0433\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 HTML.<\/p>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435 \u0442\u0435\u043a\u0441\u0442, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 Markdown<\/p>\n<pre><code>## Markdown \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442  - \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 **Markdown**<\/code><\/pre>\n<p>\u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043d\u0430 Pug:<\/p>\n<pre><code>h2 Markdown \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442  ul   li \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430     b Markdown<\/code><\/pre>\n<p>\u0438 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c \u043d\u0430 HTML:<\/p>\n<pre><code class=\"xml\">&lt;h2>Markdown \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442&lt;\/h2>  &lt;ul>   &lt;li>\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 &lt;b>Markdown&lt;\/b>&lt;\/li> &lt;\/ul><\/code><\/pre>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Pug \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 HTML. \u0427\u0442\u043e\u0431\u044b \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0435 Pug \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Markdown, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u00a0<code>:markdown-it<\/code>\u00a0\u043c\u043e\u0434\u0443\u043b\u044f\u00a0<a href=\"https:\/\/github.com\/jstransformers\/jstransformer-markdown-it\" rel=\"noopener noreferrer nofollow\">jstransformer-markdown-it<\/a>.<\/p>\n<p><a href=\"https:\/\/pugjs.org\/language\/filters.html\" rel=\"noopener noreferrer nofollow\">\u0424\u0438\u043b\u044c\u0442\u0440\u044b<\/a>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0435 Pug \u0434\u0440\u0443\u0433\u0438\u0435 \u044f\u0437\u044b\u043a\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044c\u00a0<code>jstransformer-markdown-it<\/code>:<\/p>\n<pre><code>npm i -D jstransformer-markdown-it<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0432 Pug \u0444\u0430\u0439\u043b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Markdown. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/template.pug<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0444\u0430\u0439\u043b\u0430 \u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u043e\u0434\u0430:<\/p>\n<pre><code>doctype html html(lang= 'ru')   head     meta(charset='utf-8')     title= '\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack'   body     p \u0424\u0430\u0439\u043b \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c Pug     .logo-png       img.logo1(src=require('.\/images\/image.png') alt='\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 PNG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack')     .logo-svg       img.logo2(src=require('.\/images\/logo.svg'), alt='\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack')      :markdown-it(linkify langPrefix='highlight-')       ## Markdown \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442        - \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 **Markdown**<\/code><\/pre>\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0444\u0430\u0439\u043b \u0438 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Markdown. \u042d\u0442\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u0435\u043c\u0430\u0440\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u043e \u0441\u043b\u043e\u0432\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043e \u0436\u0438\u0440\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c .<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a35\/ba4\/8c4\/a35ba48c47dba7a12fdc2b9513128a30.png\" width=\"407\" height=\"318\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a35\/ba4\/8c4\/a35ba48c47dba7a12fdc2b9513128a30.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0433\u0440\u044f\u0437\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c markdown \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c\u00a0<code>.md<\/code>\u00a0\u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0432 pug-\u0448\u0430\u0431\u043b\u043e\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f\u00a0<code>include:markdown-it<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code>doctype html html(lang= 'ru')   head     meta(charset='utf-8')     title= '\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack'   body     p \u0424\u0430\u0439\u043b \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c Pug     .logo-png       img.logo1(src=require('.\/images\/image.png') alt='\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 PNG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack')     .logo-svg       img.logo2(src=require('.\/images\/logo.svg'), alt='\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack')      include:markdown-it content\/article.md<\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%BE%D0%B2\" id=\"\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435-\u0448\u0440\u0438\u0444\u0442\u043e\u0432\"><\/a><\/p>\n<h3>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0438 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u044b, \u043d\u0443\u0436\u043d\u043e \u044d\u0442\u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u0430\u0439\u0442\u0430 \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0448\u0440\u0438\u0444\u0442\u044b. \u0422\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>\u0428\u0440\u0438\u0444\u0442\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>src\/fonts<\/code>, \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u043e\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433:<\/p>\n<pre><code>mkdir src\/fonts<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u044d\u0442\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0444\u0430\u0439\u043b <code>fonts.scss<\/code><\/p>\n<pre><code>touch src\/fonts\/fonts.scss<\/code><\/pre>\n<p>\u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c CSS \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u041f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0444\u0430\u0439\u043b <code>fonts.scss<\/code> \u0432 <code>src\/index.js<\/code>:<\/p>\n<pre><code class=\"javascript\">  import '.\/main.scss'; + import '.\/fonts\/fonts.scss';    function component(text) {     const element = document.createElement('h1');     element.textContent = text;     return element;   }    document.body.prepend(component('\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack'));<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0441\u043a\u0430\u0447\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043a\u043e\u0434 CSS \u0434\u043b\u044f \u043d\u0438\u0445.<\/p>\n<ol>\n<li>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\" rel=\"noopener noreferrer nofollow\">google-webfonts-helper<\/a> \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0441\u043b\u0435\u0432\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0448\u0440\u0438\u0444\u0442.<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<p>\u0421\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u0430. \u041d\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0435\u043a\u0446\u0438\u0438 <code>Select charsets<\/code> \u0432\u044b\u0431\u0435\u0440\u0435\u043c <code>cyrillic<\/code> \u0438 <code>latin<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0435\u043a\u0446\u0438\u0438 <code>Select styles<\/code> \u0432\u044b\u0431\u0435\u0440\u0435\u043c <code>regular<\/code>, <code>italic<\/code>, <code>700<\/code> \u0438 <code>700italic<\/code><\/p>\n<\/li>\n<li>\n<p>\u0412 \u0441\u0435\u043a\u0446\u0438\u0438 <code>Copy CSS:<\/code> \u0432 \u043f\u043e\u043b\u0435 <code>Customize folder prefix (optional):<\/code> \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 \u043f\u0443\u0442\u0438 <code>.\/<\/code> \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0437 \u0441\u0435\u0440\u043e\u0433\u043e \u043f\u043e\u043b\u044f CSS-\u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b <code>src\/fonts\/fonts.scss<\/code>.<\/p>\n<\/li>\n<\/ul>\n<ol start=\"2\">\n<li>\n<p>\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u0441\u0438\u043d\u044e\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <code>Download files<\/code> \u0438 \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.zip<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u043f\u0430\u043a\u0443\u0439\u0442\u0435 \u0438\u0437 zip-\u0430\u0440\u0445\u0438\u0432\u0430 \u0444\u0430\u0439\u043b\u044b \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src\/fonts\/<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b \u043d\u0430 \u0442\u0430\u043a\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u043a\u0430\u043a <a href=\"https:\/\/www.font2web.com\/\" rel=\"noopener noreferrer nofollow\">Font2web<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/transfonter.org\/\" rel=\"noopener noreferrer nofollow\">Transfonter<\/a>, \u043d\u043e \u0448\u0440\u0438\u0444\u0442\u044b Google \u0443\u0436\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u0448\u0430\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432\u0435\u0431\u043f\u0430\u043a\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code>:<\/p>\n<pre><code class=\"javascript\">  module: {     rules: [ +     { +       test: \/\\.(woff2?|eot|ttf|otf)$\/i, +       type: 'asset\/resource', +     },     ],   },<\/code><\/pre>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>main.scss<\/code> \u0443\u043a\u0430\u0436\u0435\u043c \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0448\u0440\u0438\u0444\u0442. \u0422\u0430\u043a, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0448\u0440\u0438\u0444\u0442 <code>Roboto<\/code> \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u0442\u043e \u0437\u0430\u043f\u0438\u0448\u0435\u043c:<\/p>\n<pre><code class=\"css\">html {   font-family: 'Roboto'; }<\/code><\/pre>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run serve<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0448\u0440\u0438\u0444\u0442 \u0431\u0435\u0437 \u0437\u0430\u0441\u0435\u0447\u0435\u043a.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6ab\/1d0\/631\/6ab1d063164a6c5ee59efd89420bba91.png\" width=\"418\" height=\"321\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ab\/1d0\/631\/6ab1d063164a6c5ee59efd89420bba91.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043d\u0430\u0436\u043c\u0435\u043c <code>Ctrl+Shift+I<\/code>, \u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u043c \u0440\u0435\u0436\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0448 <code>Ctrl+Shift+C<\/code>. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 Chrome \u0438\u043b\u0438 Yandex, \u0442\u043e \u043d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0439 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439 \u0448\u0440\u0438\u0444\u0442:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e71\/4c3\/446\/e714c3446f7dbd6993fb488d4d563bc6.png\" width=\"421\" height=\"325\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e71\/4c3\/446\/e714c3446f7dbd6993fb488d4d563bc6.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 Firefox, \u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 \u0434\u043b\u044f CSS-\u043a\u043e\u0434\u0430 \u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0430.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BA%D0%BE%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D0%B8-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" id=\"\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435-\u0444\u0430\u0439\u043b\u043e\u0432-\u0438-\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432\"><\/a><\/p>\n<h3>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/h3>\n<p>\u0427\u0430\u0441\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438\u043b\u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 \u0431\u0435\u0437 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0444\u0430\u0439\u043b\u044b PDF, \u043b\u0438\u0431\u043e \u0444\u0430\u0439\u043b <code>robots.txt<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c \u0440\u043e\u0431\u043e\u0442\u0430\u043c \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c \u0441\u0430\u0439\u0442\u0430, \u0444\u0430\u0439\u043b\u044b <code>favicon.ico<\/code>, <code>sitemap.xml<\/code> \u0438 \u0442.\u043f. \u0412 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043e\u0431\u044b\u0447\u043d\u043e, \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>static<\/code>, \u0430 \u0438\u0437 \u043d\u0435\u0435 \u044d\u0442\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043a\u043e\u043f\u0438\u0440\u0443\u044e\u0442 \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 <code>dist<\/code>.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src\/static<\/code>:<\/p>\n<pre><code>mkdir src\/static<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/static\/robots.txt<\/code>:<\/p>\n<pre><code>touch src\/static\/robots.txt<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u00a0<code>robots.txt<\/code>\u00a0\u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0<a href=\"https:\/\/yandex.ru\/support\/webmaster\/controlling-robot\/robots-txt.html\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 robots.txt<\/a>, \u0430 \u043f\u043e\u043a\u0430 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u043f\u0443\u0441\u0442\u044b\u043c.<\/p>\n<p>\u0412 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0435 <a href=\"#%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F-%D0%BE%D1%87%D0%B8%D1%81%D1%82%D0%BA%D0%B0-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/a> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d <code>filemanager-webpack-plugin<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0443\u0434\u0430\u043b\u044f\u0442\u044c, \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0438 \u0430\u0440\u0445\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438. \u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u044d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">* const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = { plugins: [       ... , *     new FileManagerPlugin({ *       events: { *         onStart: { *           delete: ['dist'], *         }, +         onEnd: { +           copy: [ +             { +               source: path.join('src', 'static', 'robots.txt'), +               destination: path.join('dist', 'robots.txt'), +             }, +           ], *         }, *       }, *     }),       ... ,     ],   };<\/code><\/pre>\n<p>\u0417\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0430\u043c\u0438\u00a0<code>*<\/code>\u00a0\u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0431\u044b\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u0432 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0435\u00a0<a href=\"#%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F-%D0%BE%D1%87%D0%B8%D1%81%D1%82%D0%BA%D0%B0-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/a>, \u0430 \u0437\u043d\u0430\u043a\u043e\u043c\u00a0<code>+<\/code>\u00a0\u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run build<\/code><\/pre>\n<p>\u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>dist<\/code> \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0444\u0430\u0439\u043b <code>robots.txt<\/code>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D0%B5-%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D1%8B-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8-webpack\" id=\"\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435-\u0440\u0435\u0441\u0443\u0440\u0441\u044b-\u0434\u043b\u044f-\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438-webpack\"><\/a><\/p>\n<h3>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 webpack<\/h3>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Webpack \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439 \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 Webpack&#8217;\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441 <a href=\"https:\/\/webpack.js.org\/configuration\/#options\" rel=\"noopener noreferrer nofollow\">\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043e\u043f\u0446\u0438\u044f\u043c\u0438<\/a>, \u0435\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0439 \u043e\u043f\u0446\u0438\u0438, \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 <a href=\"https:\/\/createapp.dev\/\" rel=\"noopener noreferrer nofollow\">createapp.dev<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438. \u042d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0434 Webpack, Parcel \u0438 Snowpack \u0438 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c webpack \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0441\u0430\u0439\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430 Pug, \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 SCSS, \u044f\u0437\u044b\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 Markdown \u0438 \u044f\u0437\u044b\u043a\u0430 JavaScript. \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/injashkin\/webpack-template\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u0417\u0430 \u0440\u0430\u043c\u043a\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432\u0435\u0431\u043f\u0430\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 React \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Vue, \u0430 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/webpack.js.org\/guides\/typescript\/\" rel=\"noopener noreferrer nofollow\">\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 TypeScript<\/a>. \u041d\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0430 \u0442\u0430\u043a\u0430\u044f \u0442\u0435\u043c\u0430, \u043a\u0430\u043a <a href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/a> \u043d\u0430 \u0447\u0430\u043d\u043a\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0430\u043d\u0434\u043b\u0430 \u0432\u044b \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0449\u0443\u0442\u0438\u043c\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c, \u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u0430\u043a <a href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/\" rel=\"noopener noreferrer nofollow\">Code Splitting<\/a>, <a href=\"https:\/\/webpack.js.org\/guides\/lazy-loading\/\" rel=\"noopener noreferrer nofollow\">Lazy Loading<\/a> \u0438 <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\" rel=\"noopener noreferrer nofollow\">Tree Shaking<\/a>.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p> <!----> <!----><\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/701724\/\"> https:\/\/habr.com\/ru\/post\/701724\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 Webpack 5 \u0438 \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Pug, Sass, JavaScript \u0438 Markdown<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h3>\n<ul>\n<li>\n<p><a href=\"#%D0%BE-%D1%87%D0%B5%D0%BC-%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F\" rel=\"noopener noreferrer nofollow\">\u041e \u0447\u0435\u043c \u0441\u0442\u0430\u0442\u044c\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B1%D1%8B%D1%81%D1%82%D1%80%D1%8B%D0%B9-%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA-webpack\" rel=\"noopener noreferrer nofollow\">\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a webpack<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-html-webpack-plugin\" rel=\"noopener noreferrer nofollow\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 html-webpack-plugin<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-devserver\" rel=\"noopener noreferrer nofollow\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 DevServer<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B2-webpack-%D1%82%D0%BE%D1%87%D0%BA%D0%B8-%D0%B2%D1%85%D0%BE%D0%B4%D0%B0-%D0%B8-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432 Webpack \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0432\u044b\u0445\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%82%D0%BE%D1%87%D0%BA%D0%B0-%D0%B2%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%82%D0%BE%D1%87%D0%BA%D0%B0-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0422\u043e\u0447\u043a\u0430 \u0432\u044b\u0445\u043e\u0434\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F-%D0%BE%D1%87%D0%B8%D1%81%D1%82%D0%BA%D0%B0-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D1%80%D0%B5%D0%B6%D0%B8%D0%BC%D0%B0-production-%D0%B2-webpack\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0435\u0436\u0438\u043c\u0430 production \u0432 webpack<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#babel\" rel=\"noopener noreferrer nofollow\">Babel<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0-pug\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430 Pug<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9-%D0%B2-webpack\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0438\u043b\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9-%D0%B2-webpack\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B9\" rel=\"noopener noreferrer nofollow\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81%D0%B0-markdown-%D0%B8-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-md-%D0%B2-pug\" rel=\"noopener noreferrer nofollow\">\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 Markdown \u0438 \u0444\u0430\u0439\u043b\u043e\u0432 .md \u0432 Pug<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D0%BE%D0%BF%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D0%B8-%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D0%B5-%D1%80%D0%B5%D1%81%D1%83%D1%80%D1%81%D1%8B-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8-webpack\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 webpack<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%BE-%D1%87%D0%B5%D0%BC-%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F\" id=\"\u043e-\u0447\u0435\u043c-\u0441\u0442\u0430\u0442\u044c\u044f\">\u0430\u0442\u044c\u044f&#187;><\/a><\/p>\n<h3>\u041e \u0447\u0435\u043c \u0441\u0442\u0430\u0442\u044c\u044f<\/h3>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 Webpack 5. \u0421\u043b\u043e\u0432\u043e &#171;\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e&#187; \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442, \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 &#8212; \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e &#171;\u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c&#187;, \u043d\u043e \u0438 &#171;\u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0430\u0434\u043e&#187;.<\/p>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043a\u0430\u0436\u0435\u0442, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0441\u0430\u0439\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b: Pug, Sass, JavaScript \u0438 Markdown.<\/p>\n<ul>\n<li>\n<p>\u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 Pug \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 HTML.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 Sass \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u0438\u043b\u0438 CSS.<\/p>\n<\/li>\n<li>\n<p>\u042f\u0437\u044b\u043a JavaScript \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0441\u0431\u043e\u0440\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u0430 \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442 \u0441\u0442\u0430\u0440\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 Markdown \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u0430\u0439\u0442\u0430. \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 Markdown \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 HTML.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u0432\u043e\u0438\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 React \u0438\u043b\u0438 Vue, \u0430 \u0442\u0430\u043a\u0436\u0435, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c TypeScript.<\/p>\n<p><a class=\"anchor\"><\/a><a class=\"anchor\" name=\"%D0%B1%D1%8B%D1%81%D1%82%D1%80%D1%8B%D0%B9-%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA-webpack\" id=\"\u0431\u044b\u0441\u0442\u0440\u044b\u0439-\u0437\u0430\u043f\u0443\u0441\u043a-webpack\">\u0441\u043a-webpack&#187;<\/a><\/p>\n<h3>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack<\/h3>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 <a href=\"https:\/\/nodejs.org\/\" rel=\"noopener noreferrer nofollow\">Node.js<\/a>.<\/p>\n<p>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 Ubuntu 20.04, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0441\u0440\u0435\u0434\u0430 NodeJS v16.17.1 \u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 NPM v8.15.0, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0422\u0435\u0440\u043c\u0438\u043d\u0430\u043b, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 (\u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430) \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 FireFox v105.0. \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0430\u0432\u0442\u043e\u0440, \u0443 \u0432\u0430\u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"bash\">mkdir my-project<\/code><\/pre>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0440\u0430\u0431\u043e\u0447\u0438\u043c:<\/p>\n<pre><code class=\"bash\">cd my-project<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043e\u043a\u043d\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 \u043d\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <code>my-project<\/code> \u0438 \u0432\u0441\u0435 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0431\u044b\u043b \u0437\u0430\u043a\u0440\u044b\u0442, \u0442\u043e \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443: <code>cd my-project<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u0430 <a href=\"https:\/\/git-scm.com\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0439 Git<\/a>, \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0434\u0432\u0430 \u0448\u0430\u0433\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Git:<\/p>\n<pre><code class=\"bash\">git init<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>.git<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b git-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u0432 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>.git<\/code> \u043d\u0430\u0436\u043c\u0435\u043c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e \u043a\u043b\u0430\u0432\u0438\u0448 <code>Ctrl+H<\/code>.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c, \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043a\u0440\u044b\u0442\u044b\u0439 \u0444\u0430\u0439\u043b <code>.gitignore<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"bash\">touch .gitignore<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u0430 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u043e\u0434\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>.gitignore<\/code> \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"bash\">node_modules<\/code><\/pre>\n<p>\u042d\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0434\u043b\u044f Git &#8212; \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules<\/code>, \u043d\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439.<\/p>\n<blockquote>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0432\u0441\u0451, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438. \u042d\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0438, \u043d\u043e \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u0422\u0430\u043a \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u0440\u0430\u0432\u043a\u0438 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0443 \u0432\u0430\u0441 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043a\u043e\u0434 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c. \u0417\u0430\u043f\u043e\u043c\u043d\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0440\u0430\u0432\u043a\u0443 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u043d\u0430\u0436\u043c\u0438 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 <code>Ctrl+S<\/code>. \u042d\u0442\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435.<\/p>\n<\/blockquote>\n<p>\u0421 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 Git \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c. \u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c, \u0438\u043d\u043e\u0433\u0434\u0430, \u0430 \u043b\u0443\u0447\u0448\u0435, \u043f\u043e\u0447\u0430\u0449\u0435, \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0438\u0442\u044b.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c npm, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"bash\">npm init -y<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430 \u0447\u0442\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0446\u0438\u044f <code>-y<\/code>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 <a href=\"https:\/\/docs.npmjs.com\/cli\/v8\/configuring-npm\/package-json\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e npm<\/a>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <code>webpack<\/code> \u0438 <code>webpack-cli<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 webpack \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code>npm i -D webpack webpack-cli<\/code><\/pre>\n<p>\u041e\u043f\u0446\u0438\u044f <code>-D<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0435\u0436\u0438\u043c\u0430 <code>development<\/code> \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435. \u0412 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u044d\u0442\u0438 \u043f\u0430\u043a\u0435\u0442\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <code>\"devDependencies\": {...}<\/code>.<\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules<\/code> \u0438 \u0444\u0430\u0439\u043b <code>package-lock.json<\/code>. \u041a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u042d\u0442\u043e\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0447\u0442\u043e \u0438 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>.gitignore<\/code>. \u0424\u0430\u0439\u043b <code>package-lock.json<\/code> \u0445\u0440\u0430\u043d\u0438\u0442 \u0437\u0430\u043f\u0438\u0441\u0438 \u043e \u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src<\/code>:<\/p>\n<pre><code class=\"bash\">mkdir src<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src<\/code> \u0434\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>src<\/code> \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>index.js<\/code>:<\/p>\n<pre><code class=\"bash\">touch src\/index.js<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>src\/index.js<\/code> \u0438 \u0432\u0432\u0435\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">function component(text) {   const element = document.createElement('h1');   element.textContent = text;   return element; }  document.body.prepend(component('\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack'));<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u043e\u0442\u043a\u0440\u043e\u0435\u043c <code>package.json<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u043e\u043b\u0435 <code>\"scripts\"<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 <code>dev<\/code>:<\/p>\n<pre><code class=\"json\">\"scripts\": {   \"dev\": \"webpack --mode development\",   \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\" }<\/code><\/pre>\n<p><code>dev<\/code> &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>webpack --mode development<\/code>. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 <code>\"scripts\"<\/code> \u0444\u0430\u0439\u043b\u0430 <code>package.json<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>npm run<\/code>. \u0422\u0430\u043a, \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432\u044b\u0448\u0435, \u0432\u0432\u0435\u0434\u0435\u043c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code>npm run dev<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>main.js<\/code>. \u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 <code>main.js<\/code> \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c <code>src\/index.js<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u044f, \u0445\u043e\u0442\u044f \u043e\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435.<\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <code>npm run dev<\/code> \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 webpack \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <code>development<\/code>. \u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, webpack \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <code>webpack.config.js<\/code>. \u0422\u0430\u043a \u043a\u0430\u043a, \u0444\u0430\u0439\u043b \u043c\u044b \u0435\u0449\u0451 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u0442\u043e webpack \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u00a0Webpack \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430\u00a0<code>src\/index.js<\/code>\u00a0\u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u043e\u0442\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u00a0<code>dist\/main.js<\/code>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u043c\u043e\u0442\u0440\u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0<a href=\"#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B2-webpack-%D1%82%D0%BE%D1%87%D0%BA%D0%B8-%D0%B2%D1%85%D0%BE%D0%B4%D0%B0-%D0%B8-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432 webpack \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430 \u0438 \u0432\u044b\u0445\u043e\u0434\u0430<\/a>. <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c HTML \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 <code>main.js<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c:<\/p>\n<pre><code>touch dist\/index.html<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>dist\/index.html<\/code> \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430 \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html>   &lt;head>     &lt;meta charset=\"utf-8\" \/>     &lt;title>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a Webpack&lt;\/title>   &lt;\/head>   &lt;body>     &lt;p>\u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0432\u0440\u0443\u0447\u043d\u0443\u044e&lt;\/p>     &lt;script src=\"main.js\">&lt;\/script>   &lt;\/body> &lt;\/html><\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code>my-project   |-dist     index.html     main.js   |+node_modules   |-src     index.js   |+.git   package-lock.json   package.json   .gitignore<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <code>dist\/index.html<\/code> \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0440\u0430\u043d \u043d\u0430 Webpack \u0424\u0430\u0439\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u0432\u0440\u0443\u0447\u043d\u0443\u044e<\/code><\/pre>\n<p><a class=\"anchor\"><\/a><a class=\"anchor\" name=\"%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-html-webpack-plugin\" id=\"\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430-\u0438-\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430-html-webpack-plugin\">ml-webpack-plugin&#187;><\/a><\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 html-webpack-plugin<\/h3>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435, \u0444\u0430\u0439\u043b <code>index.html<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c webpack, \u0447\u0442\u043e\u0431\u044b HTML-\u0444\u0430\u0439\u043b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>html-webpack-plugin<\/code>.<\/p>\n<p>\u0418\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d:<\/p>\n<pre><code>npm i -D html-webpack-plugin<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c html-webpack-plugin. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c:<\/p>\n<pre><code>touch webpack.config.js<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code> \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path');  module.exports = {   plugins: [     new HtmlWebpackPlugin({       template: path.join(__dirname, 'src', 'template.html'),       filename: 'index.html',     }),   ], };<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0444\u0430\u0439\u043b\u0430 <code>webpack.config.js<\/code> \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435:<\/p>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 <code>html-webpack-plugin<\/code> \u0438 <code>path<\/code> \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u044d\u0442\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>HtmlWebpackPlugin<\/code> \u0438 <code>path<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p><code>module.exports = {}<\/code> &#8212; \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <code>html-webpack-plugin<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <code>new HtmlWebpackPlugin<\/code> \u0441 \u0434\u0432\u0443\u043c\u044f \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438: <code>template<\/code> &#8212; \u043f\u0443\u0442\u044c \u043a \u0432\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443 \u0438 <code>filename<\/code> &#8212; \u0438\u043c\u044f \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>template<\/code> \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0443\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u043b\u043e\u0436\u0435\u043d \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0412 Linux \u0438 macOS \u043f\u0443\u0442\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a: <code>\/path\/to\/template.html<\/code>. \u0412 Windows \u043f\u0443\u0442\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0438\u043d\u0430\u0447\u0435: <code>C:\\path\\to\\template.html<\/code>. \u0412 Node.js \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c <code>path<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f. \u041c\u043e\u0434\u0443\u043b\u044c <code>path<\/code> \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0444\u0430\u0439\u043b\u0430 <code>webpack.config.js<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u043b\u0438 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>template<\/code>. \u041c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/nodejs.org\/dist\/latest-v16.x\/docs\/api\/path.html#pathjoinpaths\" rel=\"noopener noreferrer nofollow\">path.join<\/a> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0443\u0442\u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0421\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043f\u0443\u0442\u0438 \u0434\u043b\u044f \u043c\u0435\u0442\u043e\u0434\u0430 <code>path.join<\/code> \u0437\u0430\u0434\u0430\u043b\u0438 \u0442\u0440\u0435\u043c\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <code>__dirname<\/code>, <code>'src'<\/code> \u0438 <code>'template.html'<\/code>. \u0415\u0441\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u041e\u0421 Linux, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 <code>template: path.join(__dirname, 'src', 'template.html')<\/code> \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435 &#8212; <code>template: '.\/src\/template.html'<\/code><\/p>\n<ul>\n<li>\n<p><code>__dirname<\/code> &#8212; \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443 \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u0443 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443, \u0442. \u0435. \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 <code>__dirname<\/code> &#8212; \u044d\u0442\u043e \u0444\u0430\u0439\u043b <code>webpack.config.js<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <code>__dirname<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u0430 <code>path.join<\/code> \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/nodejs.org\/dist\/latest-v16.x\/docs\/api\/path.html#pathresolvepaths\" rel=\"noopener noreferrer nofollow\">path.resolve<\/a>.<\/p>\n<p>\u0424\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <a href=\"https:\/\/webpack.js.org\/configuration\/#options\" rel=\"noopener noreferrer nofollow\">webpack.config.js<\/a> \u043d\u0443\u0436\u0435\u043d \u0432\u0435\u0431\u043f\u0430\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0442\u043e\u043c \u0438\u043b\u0438 \u0438\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435. Webpack \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442, \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043b\u0435\u0436\u0438\u0442 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>webpack.config.js<\/code>. \u0415\u0441\u043b\u0438 \u0438\u043c\u044f \u0438\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u0440\u0443\u0433\u043e\u0435, \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0446\u0438\u0438 <code>--config<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code>, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"json\">\"scripts\": {   \"serve\": \"webpack serve --open --mode development --config dev\/serve.config.js\" }<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u043e \u043c\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c.<\/p>\n<p>\u0418\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>src\/template.html<\/code>:<\/p>\n<pre><code>touch src\/template.html<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0432<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-341753","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/341753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=341753"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/341753\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=341753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=341753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=341753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}