{"id":228442,"date":"2022-10-15T14:27:00","date_gmt":"2022-10-15T11:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228442"},"modified":"2022-11-09T02:27:56","modified_gmt":"2022-11-08T23:27:56","slug":"dodatkova-konfiguracija-dlja-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/uk\/dodatkova-konfiguracija-dlja-webpack\/","title":{"rendered":"\u0414\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0430 \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u044f \u0434\u043b\u044f webpack"},"content":{"rendered":"\n

\u0426\u044f \u0441\u0442\u0430\u0442\u0442\u044f \u0431\u0430\u0437\u0443\u0454\u0442\u044c\u0441\u044f \u043d\u0430 webpack.config.js<\/code>\u0444\u0430\u0439\u043b\u0456, \u044f\u043a\u0438\u0439 \u043c\u0438 \u0441\u0442\u0432\u043e\u0440\u0438\u043b\u0438 \u0432 \u0441\u0442\u0430\u0442\u0442\u0456 \u0420\u043e\u0437\u0448\u0438\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u0457 \u0432\u0435\u0431-\u043f\u0430\u043a\u0435\u0442\u0430 WordPress Create Block Script<\/a>. \u042f\u043a\u0449\u043e \u0432\u0438 \u043d\u0435 \u0447\u0438\u0442\u0430\u043b\u0438 \u0446\u044e \u0441\u0442\u0430\u0442\u0442\u044e, \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0448\u0432\u0438\u0434\u043a\u043e \u0457\u0457 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u0438.<\/p>\n

\u0426\u044f \u0441\u0442\u0430\u0442\u0442\u044f \u0441\u0442\u043e\u0441\u0443\u0454\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0440\u0456\u0448\u043e\u0457 \u0432\u0435\u0440\u0441\u0456\u0457 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0431\u043b\u043e\u043a\u0443<\/strong><\/p>\n

\u0425\u043e\u0447\u0430 \u0446\u044e \u0442\u0435\u043e\u0440\u0456\u044e \u0432\u0441\u0435 \u0449\u0435 \u043c\u043e\u0436\u043d\u0430 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u0432\u0430\u0442\u0438, \u0434\u0435\u044f\u043a\u0430 \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u044f \u0432 \u0446\u0456\u0439 \u0441\u0442\u0430\u0442\u0442\u0456 \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u043d\u0435\u0441\u0443\u043c\u0456\u0441\u043d\u043e\u044e \u0437 \u043e\u0441\u0442\u0430\u043d\u043d\u0456\u043c \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0454\u043c \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0431\u043b\u043e\u043a\u0443. \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u043d\u0430\u0448 \u043e\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u041f\u043e\u0441\u0456\u0431\u043d\u0438\u043a \u0437\u0456 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u044e \u0431\u043b\u043e\u043a\u0443 \u0442\u0443\u0442<\/a>.<\/p>\n

\u0423 \u043d\u0430\u0441 \u0442\u0430\u043a\u043e\u0436 \u0454 \u043e\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u043f\u043e\u0441\u0456\u0431\u043d\u0438\u043a \u0449\u043e\u0434\u043e \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0438\u0445 \u0442\u043e\u0447\u043e\u043a \u0432\u0445\u043e\u0434\u0443 \u0434\u043e webpack<\/a>.<\/p>\n

\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u043a\u0440\u043e\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 CSS \u0456\u0437 \u043f\u043e\u043b\u0456\u0437\u0430\u043f\u043e\u0432\u043d\u0435\u043d\u043d\u044f\u043c\u0438 \u0442\u0430 \u043f\u0440\u0435\u0444\u0456\u043a\u0441\u0430\u043c\u0438<\/h2>\n

\u041f\u0435\u0440\u0448 \u043d\u0456\u0436 \u043c\u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c\u043e \u0434\u043e \u0446\u044c\u043e\u0433\u043e, \u044f \u0445\u043e\u0447\u0443 \u0432\u0456\u0434\u0434\u0430\u0442\u0438 \u043d\u0430\u043b\u0435\u0436\u043d\u0435 \u0414\u0436\u0435\u0444\u0444\u0440\u0456 \u041a\u0430\u0440\u0430\u043d\u0434\u0430\u043d\u0433\u0443<\/a> \u0437\u0430 \u0439\u043e\u0433\u043e \u0447\u0443\u0434\u043e\u0432\u0443 \u0441\u0442\u0430\u0442\u0442\u044e \u043f\u0440\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f PostCSS \u0456\u0437 webpack<\/a>, \u0434\u043b\u044f \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u044f\u043a\u043e\u0457 \u044f \u0447\u0435\u0440\u043f\u0430\u0432 \u043d\u0430\u0442\u0445\u043d\u0435\u043d\u043d\u044f \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0440\u043e\u0437\u0434\u0456\u043b\u0443 \u0441\u0442\u0430\u0442\u0442\u0456.<\/p>\n

\u0429\u043e\u0431 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u0442\u0438 \u043f\u043e\u043b\u0456\u0437\u0430\u043f\u043e\u0432\u043d\u0435\u043d\u043d\u044f \u0442\u0430 \u043a\u0440\u043e\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0456 \u043f\u0440\u0435\u0444\u0456\u043a\u0441\u0438, \u043c\u0438 \u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e\u0441\u044f \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 postcss-loader<\/code>\u043f\u0430\u043a\u0435\u0442 npm \u0434\u043b\u044f \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u043f\u043b\u0430\u0433\u0456\u043d\u0430 [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

\u041f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0439\u0442\u0435\u0441\u044f, \u0449\u043e \u043c\u0438 cd<\/code>\u043f\u0435\u0440\u0435\u0439\u0448\u043b\u0438 \u0432 \u043a\u043e\u0440\u0435\u043d\u0435\u0432\u0443 \u043f\u0430\u043f\u043a\u0443 \u043d\u0430\u0448\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0456\u043d\u0430, \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435, \u0449\u043e\u0431 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0438 \u0446\u0456 \u0434\u0432\u0430 \u043f\u0430\u043a\u0443\u043d\u043a\u0438.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
\u0414\u0430\u043b\u0456 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0440\u043e\u0437\u0448\u0438\u0440\u0438\u0442\u0438 \u043d\u0430\u0448\u0443 \/webpack.config.js<\/code>\u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u044e \u0434\u043b\u044f \u0446\u0438\u0445 \u0434\u0432\u043e\u0445 \u043f\u0430\u043a\u0435\u0442\u0456\u0432:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins:() => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        splitChunks: {\n            cacheGroups: {\n                editor: {\n                    chunks: 'all',\n                    enforce: true,\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\n                    enforce: true,\n                    name: 'style',\n                    test: \/style.s[ac]ss$\/i,\n                },\n                default: false,\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),\n    ],\n};\n\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443 \u043d\u0430 \u0437\u043c\u0456\u043d\u0438 \u0432 \u0440\u044f\u0434\u043a\u0430\u0445 4 \u0456 18.<\/p>\n
\u0422\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0430\u0432\u0442\u043e\u043f\u0440\u0435\u0444\u0456\u043a\u0441\u0435\u0440\u0430<\/h3>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0434\u0430\u043c\u043e \u043a\u043e\u0434 \u0434\u043e \u043d\u0430\u0448\u043e\u0433\u043e \/src\/sass\/style.scss<\/code>\u0444\u0430\u0439\u043b\u0443, \u0449\u043e\u0431 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e \u0430\u0432\u0442\u043e\u043f\u0440\u0435\u0444\u0456\u043a\u0441\u0443 \u043f\u043b\u0430\u0433\u0456\u043d\u0430 PostCSS. \u042f \u0432\u0441\u0442\u0430\u0432\u043b\u044e \u0434\u0435\u044f\u043a\u0456 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f ::placeholder<\/code>\u0443 \u0444\u0430\u0439\u043b, \u044f\u043a\u0438\u0439 \u0449\u0435 \u043d\u0435 \u043c\u0430\u0454 \u043f\u043e\u0432\u043d\u043e\u0457 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
\u0423 \u043d\u0430\u0448\u043e\u043c\u0443 \u0441\u043a\u043e\u043c\u043f\u0456\u043b\u044c\u043e\u0432\u0430\u043d\u043e\u043c\u0443 \/style.css<\/code>\u0444\u0430\u0439\u043b\u0456 \u0442\u0435\u043f\u0435\u0440 \u0432\u0438\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435:<\/p>\n
::-webkit-input-placeholder {\n  color: #f00; }\n\n::-moz-placeholder {\n  color: #f00; }\n\n:-ms-input-placeholder {\n  color: #f00; }\n\n::-ms-input-placeholder {\n  color: #f00; }\n\n::placeholder {\n  color: #f00; }\n<\/code><\/pre>\n
\u0422\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u043e\u043b\u0456\u0444\u0456\u043b\u0456\u0432<\/h3>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0434\u0430\u043c\u043e \u043a\u043e\u0434 \u0434\u043e \u043d\u0430\u0448\u043e\u0433\u043e \/src\/sass\/style.scss<\/code>\u0444\u0430\u0439\u043b\u0443, \u0449\u043e\u0431 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e polyfill \u043f\u043b\u0430\u0433\u0456\u043d\u0430 PostCSS. \u042f \u0432\u0441\u0442\u0430\u0432\u043b\u044e \u0434\u0435\u044f\u043a\u0456 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f all<\/code>\u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 (\u044f\u043a\u0456 \u0441\u043a\u0438\u0434\u0430\u044e\u0442\u044c \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432) \u0443 \u0444\u0430\u0439\u043b, \u044f\u043a\u0438\u0439 \u0449\u0435 \u043d\u0435 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454 \u043f\u043e\u0432\u043d\u0443 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n
\u0423 \u043d\u0430\u0448\u043e\u043c\u0443 \u0441\u043a\u043e\u043c\u043f\u0456\u043b\u044c\u043e\u0432\u0430\u043d\u043e\u043c\u0443 \/style.css<\/code>\u0444\u0430\u0439\u043b\u0456 \u0442\u0435\u043f\u0435\u0440 \u0432\u0438\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0435:<\/p>\n
a {\n  -webkit-animation: none 0s ease 0s 1 normal none running;\n          animation: none 0s ease 0s 1 normal none running;\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  background: transparent none repeat 0 0 \/ auto auto padding-box border-box scroll;\n  border: medium none currentColor;\n  border-collapse: separate;\n  -o-border-image: none;\n     border-image: none;\n  border-radius: 0;\n  border-spacing: 0;\n  bottom: auto;\n  box-shadow: none;\n  box-sizing: content-box;\n  caption-side: top;\n  clear: none;\n  clip: auto;\n  color: #000;\n  -webkit-columns: auto;\n     -moz-columns: auto;\n          columns: auto;\n  -webkit-column-count: auto;\n     -moz-column-count: auto;\n          column-count: auto;\n  -webkit-column-fill: balance;\n     -moz-column-fill: balance;\n          column-fill: balance;\n  grid-column-gap: normal;\n  -webkit-column-gap: normal;\n     -moz-column-gap: normal;\n          column-gap: normal;\n  -webkit-column-rule: medium none currentColor;\n     -moz-column-rule: medium none currentColor;\n          column-rule: medium none currentColor;\n  -webkit-column-span: 1;\n     -moz-column-span: 1;\n          column-span: 1;\n  -webkit-column-width: auto;\n     -moz-column-width: auto;\n          column-width: auto;\n  content: normal;\n  counter-increment: none;\n  counter-reset: none;\n  cursor: auto;\n  direction: ltr;\n  display: inline;\n  empty-cells: show;\n  float: none;\n  font-family: serif;\n  font-size: medium;\n  font-style: normal;\n  font-feature-settings: normal;\n  font-variant: normal;\n  font-weight: normal;\n  font-stretch: normal;\n  line-height: normal;\n  height: auto;\n  -webkit-hyphens: none;\n      -ms-hyphens: none;\n          hyphens: none;\n  left: auto;\n  letter-spacing: normal;\n  list-style: disc outside none;\n  margin: 0;\n  max-height: none;\n  max-width: none;\n  min-height: 0;\n  min-width: 0;\n  opacity: 1;\n  orphans: 2;\n  outline: medium none invert;\n  overflow: visible;\n  overflow-x: visible;\n  overflow-y: visible;\n  padding: 0;\n  page-break-after: auto;\n  page-break-before: auto;\n  page-break-inside: auto;\n  perspective: none;\n  perspective-origin: 50% 50%;\n  position: static;\n  right: auto;\n  -moz-tab-size: 8;\n    -o-tab-size: 8;\n       tab-size: 8;\n  table-layout: auto;\n  text-align: left;\n  -moz-text-align-last: auto;\n       text-align-last: auto;\n  text-decoration: none;\n  text-indent: 0;\n  text-shadow: none;\n  text-transform: none;\n  top: auto;\n  transform: none;\n  transform-origin: 50% 50% 0;\n  transform-style: flat;\n  transition: none 0s ease 0s;\n  unicode-bidi: normal;\n  vertical-align: baseline;\n  visibility: visible;\n  white-space: normal;\n  widows: 2;\n  width: auto;\n  word-spacing: normal;\n  z-index: auto;\n  all: initial; }\n<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440 \u0446\u0435 \u0431\u0430\u0433\u0430\u0442\u043e CSS!<\/p>\n
\u0417\u043c\u0435\u043d\u0448\u0435\u043d\u043d\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0443<\/h2>\n
\u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0448\u0432\u0438\u0434\u0448\u0435 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0432\u0430\u0442\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0438 JavaScript \u0456 CSS, \u043f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0432\u0448\u0438\u0441\u044c, \u0449\u043e \u0432\u043e\u043d\u0438 \u0437\u043c\u0435\u043d\u0448\u0435\u043d\u0456. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u0438 \u043f\u0430\u0440\u0443 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0438\u0445 \u043f\u043b\u0430\u0433\u0456\u043d\u0456\u0432 \u0443 \u043d\u0430\u0448\u0443 \u0437\u0431\u0456\u0440\u043a\u0443.<\/p>\n
\u041c\u0456\u043d\u0456\u043c\u0456\u0437\u0430\u0446\u0456\u044f CSS \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e webpack<\/h3>\n
\u0429\u043e\u0431 \u043c\u0456\u043d\u0456\u043c\u0456\u0437\u0443\u0432\u0430\u0442\u0438 CSS, \u043c\u0438 \u0431\u0443\u0434\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 optimize-css-assets-webpack-plugin<\/code>\u043f\u0430\u043a\u0435\u0442 npm<\/a>.<\/p>\n
\u041f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0439\u0442\u0435\u0441\u044f, \u0449\u043e \u0432\u0438 cd<\/code>\u0432\u0432\u0456\u0439\u0448\u043b\u0438 \u0432 \u043a\u043e\u0440\u0435\u043d\u0435\u0432\u0443 \u043f\u0430\u043f\u043a\u0443 \u043f\u043b\u0430\u0433\u0456\u043d\u0430, \u0456 \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u0442\u0435\u0440\u043c\u0456\u043d\u0430\u043b\u0456:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440 \u0432\u043d\u0435\u0441\u0456\u0442\u044c \u0443 \u0441\u0432\u0456\u0439 \/webpack.config.js<\/code>\u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0456 \u0437\u043c\u0456\u043d\u0438:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins:() => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        minimize: true,\n        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ],\n        splitChunks: {\n            cacheGroups: {\n                  default: false,\n                editor: {\n                    chunks: 'all',\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',                   \n                    name: 'style',\n                    test: \/style.s[ac]ss$\/i,\n                },\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443 \u043d\u0430 \u0456\u043c\u043f\u043e\u0440\u0442 \u0443 \u0440\u044f\u0434\u043a\u0443 4, \u043c\u0438 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u044f\u0454\u043c\u043e webpack \u043c\u0456\u043d\u0456\u043c\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0432 \u0440\u044f\u0434\u043a\u0443 32, \u0430 \u043f\u043b\u0430\u0433\u0456\u043d \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0454\u0442\u044c\u0441\u044f \u0432 \u0440\u044f\u0434\u043a\u0443 33.<\/p>\n
\u0422\u0435\u043f\u0435\u0440, \u043a\u043e\u043b\u0438 \u043c\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454\u043c\u043e npm start<\/code>, \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u0442\u0438 \u043e\u0434\u0438\u043d \u0456\u0437 \u043d\u0430\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u0456\u0432 CSS \u0443 \u043a\u043e\u0440\u0435\u043d\u0456 \u043f\u043b\u0430\u0433\u0456\u043d\u0430, \u0449\u043e\u0431 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041e\u0441\u044c \u044f\u043a \/style.css<\/code>\u0432\u0438\u0433\u043b\u044f\u0434\u0430\u0454 \u0437\u0430\u0440\u0430\u0437:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
\u0412\u0456\u043d \u0432\u0438\u0434\u0430\u043b\u0438\u0432 \u0443\u0441\u0456 \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0456, \u043f\u0440\u043e\u0431\u0456\u043b\u0438 \u0442\u0430 \u043f\u043e\u043c\u0456\u0441\u0442\u0438\u0432 \u0443\u0441\u0435 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434\u043e\u043a, \u0449\u043e \u0437\u043c\u0435\u043d\u0448\u0438\u043b\u043e \u0440\u043e\u0437\u043c\u0456\u0440 \u0444\u0430\u0439\u043b\u0443.<\/p>\n
\u0417\u043c\u0435\u043d\u0448\u0435\u043d\u043d\u044f JavaScript \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e webpack<\/h3>\n
\u042f\u043a\u0449\u043e \u043c\u0438 \u043f\u043e\u0434\u0438\u0432\u0438\u043c\u043e\u0441\u044f \u043d\u0430 \/build\/index.js<\/code>\u0444\u0430\u0439\u043b, \u0432\u0456\u043d \u0434\u043e\u0441\u0438\u0442\u044c \u0432\u0435\u043b\u0438\u043a\u0438\u0439. \u0426\u0435\u0439 \u0444\u0430\u0439\u043b \u0442\u0430\u043a\u043e\u0436 \u043c\u043e\u0436\u043d\u0430 \u0437\u043c\u0435\u043d\u0448\u0438\u0442\u0438.<\/p>\n
\u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u043c\u0438 \u0431\u0443\u0434\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 terser-webpack-plugin<\/code>\u043f\u0430\u043a\u0435\u0442 npm<\/a>.<\/p>\n
\u041f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0439\u0442\u0435\u0441\u044f, \u0449\u043e \u0432\u0438 cd<\/code>\u0432\u0432\u0456\u0439\u0448\u043b\u0438 \u0432 \u043a\u043e\u0440\u0435\u043d\u0435\u0432\u0443 \u043f\u0430\u043f\u043a\u0443 \u043f\u043b\u0430\u0433\u0456\u043d\u0430, \u0456 \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u0442\u0435\u0440\u043c\u0456\u043d\u0430\u043b\u0456:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440 \u0432\u043d\u0435\u0441\u0456\u0442\u044c \u0443 \u0441\u0432\u0456\u0439 \/webpack.config.js<\/code>\u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0456 \u0437\u043c\u0456\u043d\u0438:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\nconst TerserWebPackPlugin = require( 'terser-webpack-plugin' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins: () => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        minimize: true,\n        minimizer: [ \n            new OptimizeCssAssetsWebpackPlugin(),\n            new TerserWebPackPlugin(),\n        ],\n        splitChunks: {\n            cacheGroups: {\n                default: false,\n                editor: {\n                    chunks: 'all',\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\n                    name: 'style',\n                    test: \/style.s[ac]ss$\/i,\n                },\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443 \u043d\u0430 \u0456\u043c\u043f\u043e\u0440\u0442 \u0443 \u0440\u044f\u0434\u043a\u0443 7 \u0456 \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u0434\u043e \u043c\u0456\u043d\u0456\u043c\u0456\u0437\u0430\u0442\u043e\u0440\u0430 \u0432 \u0440\u044f\u0434\u043a\u0443 36.<\/p>\n
\u0422\u0435\u043f\u0435\u0440, \u044f\u043a\u0449\u043e \u043c\u0438 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u043d\u0430\u0448 \/build\/index.js<\/code>\u0444\u0430\u0439\u043b, JavaScript \u0431\u0443\u043b\u043e \u0437\u043c\u0435\u043d\u0448\u0435\u043d\u043e.<\/p>\n
\u0417\u0433\u043e\u0440\u0442\u0430\u043d\u043d\u044f JavaScript<\/p>\n
\u041e\u0442\u0440\u0438\u043c\u0430\u0439\u0442\u0435 \u0441\u0443\u0442\u044c \u043f\u0440\u0435\u0444\u0456\u043a\u0441\u0430 \u0442\u0430 \u043c\u0456\u043d\u0456\u0444\u0456\u043a\u0430\u0446\u0456\u0457<\/h3>\n
\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0442\u0438 \u0444\u0430\u0439\u043b polyfill \u0456 \u043c\u0456\u043d\u0456\u0444\u0456\u043a\u0430\u0446\u0456\u0457 \/webpack.config.js<\/code>, \u0430 \u0442\u0430\u043a\u043e\u0436 \u0441\u0443\u043f\u0443\u0442\u043d\u0456 \/package.json<\/code>\u0444\u0430\u0439\u043b\u0438 \u0437 GitHub gist<\/a>.<\/p>\n
\u0413\u043e\u0442\u043e\u0432\u0430 \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u044f \u0442\u0430\u043a\u043e\u0436 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u043a\u0456\u043b\u044c\u043a\u0430 \u0431\u043e\u043d\u0443\u0441\u0456\u0432. \u041e\u0441\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043e\u0433\u043b\u044f\u0434 \u043a\u043e\u0436\u043d\u043e\u0433\u043e.<\/p>\n
\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0456\u0442\u044c \u0443 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u0430\u0448 CSS<\/h3>\n
\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0443\u0432\u0430\u0442\u0438, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0432\u0438\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u0438 \u0442\u0430 \u043d\u0430\u0432\u043e\u0434\u0438\u0442\u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0443 \u0441\u0432\u043e\u0454\u043c\u0443 Sass \u043f\u0456\u0434 \u0447\u0430\u0441 \u0440\u043e\u0431\u043e\u0442\u0438, \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0456\u0442\u044c \u0442\u0430\u043a\u0456 \u043f\u0430\u043a\u0435\u0442\u0438:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
\u0422\u0430\u043a\u043e\u0436 \u0437\u0431\u0435\u0440\u0435\u0436\u0456\u0442\u044c \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u0444\u0430\u0439\u043b \u0443 \u0432\u0430\u0448\u0456\u0439 \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u0457 \u043f\u0456\u0434 \u043d\u0430\u0437\u0432\u043e\u044e .stylelintrc<\/code>. \u0426\u0435 \u0443\u0441\u043f\u0430\u0434\u043a\u043e\u0432\u0443\u0454 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0456 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438, \u043d\u0430\u0434\u0430\u043d\u0456 stylelint-config-standard<\/code>, \u0456 \u0434\u043e\u0434\u0430\u0454 \u043a\u0456\u043b\u044c\u043a\u0430 \u0431\u043e\u043d\u0443\u0441\u0456\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0447\u0438 \u0430\u043b\u0444\u0430\u0432\u0456\u0442\u043d\u0438\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a.<\/p>\n
\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0444\u0430\u0439\u043b \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e \u0441\u0432\u043e\u0457\u0445 \u0443\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u044c, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u0432\u043a\u0430\u0437\u0456\u0432\u043a\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0456\u0457 Styleline<\/a>.<\/p>\n
{\n    \"extends\": \"stylelint-config-standard\",\n    \"plugins\": [\n        \"stylelint-order\"\n    ],\n    \"rules\": {\n        \"color-hex-length\": \"long\",\n        \"font-family-name-quotes\": null,\n        \"function-url-quotes\": \"always\",\n        \"indentation\": \"tab\",\n        \"max-empty-lines\": 2,\n        \"number-leading-zero\": \"never\",\n        \"order\/order\": [\n            \"custom-properties\",\n            \"declarations\"\n        ],\n        \"order\/properties-alphabetical-order\": true,\n        \"string-quotes\": \"single\",\n    }\n}\n<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440 \u0443 \u0432\u0430\u0448\u043e\u043c\u0443 \/src\/editor.scss<\/code>\u0444\u0430\u0439\u043b\u0456 \u0437\u0440\u043e\u0431\u0456\u0442\u044c \u0441\u0432\u0456\u0439 Sass \u0442\u0440\u043e\u0445\u0438 \u0431\u0435\u0437\u043b\u0430\u0434\u043d\u0438\u043c \u0456 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u043a\u0456\u043b\u044c\u043a\u0430 \u043f\u0440\u0430\u0432\u0438\u043b \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440, \u043a\u043e\u043b\u0438 \u0432\u0438 \u0432\u0438\u043a\u043e\u043d\u0443\u0454\u0442\u0435 npm start<\/code>\u043d\u0430\u0442\u0438\u0441\u043a\u0430\u043d\u043d\u044f \u00ab\u0417\u0431\u0435\u0440\u0435\u0433\u0442\u0438\u00bb, \u0432\u043e\u043d\u043e \u0431\u0443\u0434\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0432\u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u0430\u043d\u043e \u0442\u0430 \u0432\u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u0430\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/p>\n
.wp-block-wcltd-wholesome-notes {\n    background: url('https:\/\/via.placeholder.com\/150');\n    border: 1px dotted #ff0000;\n}\n<\/code><\/pre>\n
\u0417\u0430\u0443\u0432\u0430\u0436\u0442\u0435, \u0449\u043e \u0434\u0435\u044f\u043a\u0456 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u044f\u043a\u0456 \u044f \u0434\u043e\u0434\u0430\u0432 \u0443 \u0441\u0432\u0456\u0439 .stylelintrc<\/code>\u0444\u0430\u0439\u043b, \u0440\u0435\u0430\u043b\u0456\u0437\u043e\u0432\u0430\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434:<\/p>\n