{"id":228716,"date":"2022-10-15T15:01:00","date_gmt":"2022-10-15T12:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228716"},"modified":"2022-11-09T03:59:21","modified_gmt":"2022-11-09T00:59:21","slug":"webpackin-lisaeasetukset","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/webpackin-lisaeasetukset\/","title":{"rendered":"Webpackin lis\u00e4asetukset"},"content":{"rendered":"\n

T\u00e4m\u00e4 artikkeli perustuu webpack.config.js<\/code>tiedoston p\u00e4\u00e4lle, jonka loimme artikkelissa WordPressin Luo Block Script -verkkopaketin kokoonpanon laajentaminen<\/a>. Jos et ole lukenut t\u00e4t\u00e4 artikkelia, sinun kannattaa lukea se nopeasti.<\/p>\n

T\u00e4m\u00e4 artikkeli koskee Luo lohkokomentosarjan vanhempaa versiota<\/strong><\/p>\n

Vaikka teoriaa voidaan edelleen soveltaa, jotkin t\u00e4m\u00e4n artikkelin tiedoista eiv\u00e4t ehk\u00e4 ole en\u00e4\u00e4 yhteensopivia uusimman luontilohkokomentosarjan kanssa. Voit tarkastella p\u00e4ivitetty\u00e4 Luo Block Script -oppaamme t\u00e4\u00e4lt\u00e4<\/a>.<\/p>\n

Meill\u00e4 on my\u00f6s p\u00e4ivitetty opas uusien sis\u00e4\u00e4ntulokohtien lis\u00e4\u00e4misest\u00e4 webpackiin<\/a>.<\/p>\n

Tukee CSS-ristiselainta polyt\u00e4ytteill\u00e4 ja etuliitteill\u00e4<\/h2>\n

Ennen kuin aloitamme, haluan antaa tunnustusta Jeffrey Carandangille<\/a> h\u00e4nen mahtavasta artikkelistaan \u200b\u200bPostCSS:n k\u00e4ytt\u00e4misest\u00e4 verkkopaketin kanssa<\/a>, jota varten sain inspiraation artikkelin t\u00e4h\u00e4n osioon.<\/p>\n

Tukeaksemme monit\u00e4ytteit\u00e4 ja Cross-Browser-etuliitteit\u00e4 aiomme k\u00e4ytt\u00e4\u00e4 postcss-loader<\/code>npm-pakettia laajennuksen lataamiseen [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

Varmista, ett\u00e4 olemme cd<\/code>perehtyneet laajennuksen juureen, suorita seuraava n\u00e4iden kahden paketin asentamiseksi.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
Seuraavaksi meid\u00e4n on laajennettava \/webpack.config.js<\/code>sis\u00e4llytt\u00e4m\u00e4\u00e4n n\u00e4iden kahden paketin m\u00e4\u00e4ritykset:<\/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
Huomaa muutokset riveill\u00e4 4 ja 18.<\/p>\n
Autoprefixerin testaus<\/h3>\n
Lis\u00e4t\u00e4\u00e4n \/src\/sass\/style.scss<\/code>tiedostoomme koodia PostCSS-laajennuksen automaattisen prefixer-toiminnon testaamiseksi. Lis\u00e4\u00e4n joitain s\u00e4\u00e4nt\u00f6j\u00e4 ::placeholder<\/code>tiedostoon, jolla ei viel\u00e4 ole t\u00e4ytt\u00e4 selaintukea.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
K\u00e4\u00e4nnetyss\u00e4 \/style.css<\/code>tiedostossamme tulostetaan nyt seuraava:<\/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
Polyfillien testaus<\/h3>\n
Lis\u00e4t\u00e4\u00e4n \/src\/sass\/style.scss<\/code>tiedostoomme koodia PostCSS-laajennuksen polyfill-toiminnon testaamiseksi. Lis\u00e4\u00e4n joitain s\u00e4\u00e4nt\u00f6j\u00e4 all<\/code>ominaisuudelle (joka nollaa elementin ominaisuudet) tiedostoon, jolla ei viel\u00e4 ole t\u00e4ytt\u00e4 selaintukea.<\/p>\n
K\u00e4\u00e4nnetyss\u00e4 \/style.css<\/code>tiedostossamme tulostetaan nyt seuraava:<\/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
Nyt se on paljon CSS:\u00e4\u00e4!<\/p>\n
Ulostulon pienent\u00e4minen<\/h2>\n
Voimme ladata JavaScript- ja CSS-resurssimme nopeammin varmistamalla, ett\u00e4 ne on minimoitu. T\u00e4t\u00e4 varten voimme lis\u00e4t\u00e4 pari lis\u00e4laajennusta rakentamiseen.<\/p>\n
CSS:n pienent\u00e4minen webpackilla<\/h3>\n
CSS:n minimoimiseksi aiomme k\u00e4ytt\u00e4\u00e4 optimize-css-assets-webpack-plugin<\/code>npm-pakettia<\/a>.<\/p>\n
Varmista, ett\u00e4 olet cd<\/code>p\u00e4\u00e4ssyt laajennuksen juureen ja suorita seuraava komento p\u00e4\u00e4tteess\u00e4si:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
Tee nyt \/webpack.config.js<\/code>tiedostoosi seuraavat muutokset:<\/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
Huomaa tuonti rivill\u00e4 4, meit\u00e4 k\u00e4skee webpack minimoida rivill\u00e4 32 ja laajennus ladataan riville 33.<\/p>\n
Nyt kun suoritamme, npm start<\/code>voimme tutkia yht\u00e4 CSS-tiedostoistamme laajennuksen juuressa n\u00e4hd\u00e4ksemme tulosteen. T\u00e4lt\u00e4 \/style.css<\/code>nyt n\u00e4ytt\u00e4\u00e4:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
Se on poistanut kaikki kommentit, v\u00e4lily\u00f6nnit ja laittanut kaiken yhdelle riville, mik\u00e4 on pienent\u00e4nyt tiedoston kokoa.<\/p>\n
JavaScriptin pienent\u00e4minen webpackilla<\/h3>\n
Jos katsomme \/build\/index.js<\/code>tiedostoa, se on melko pitk\u00e4. T\u00e4m\u00e4 tiedosto voisi my\u00f6s tehd\u00e4 pienennyksen.<\/p>\n
T\u00e4t\u00e4 varten aiomme k\u00e4ytt\u00e4\u00e4 terser-webpack-plugin<\/code>npm-pakettia<\/a>.<\/p>\n
Varmista, ett\u00e4 olet cd<\/code>p\u00e4\u00e4ssyt laajennuksen juureen ja suorita seuraava komento p\u00e4\u00e4tteess\u00e4si:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
Tee nyt \/webpack.config.js<\/code>tiedostoosi seuraavat muutokset:<\/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
Huomaa tuonti rivill\u00e4 7 ja lis\u00e4ys minimointiin rivill\u00e4 36.<\/p>\n
Jos nyt tarkastelemme \/build\/index.js<\/code>tiedostoamme, JavaScript on pienennetty.<\/p>\n
JavaScriptin pienent\u00e4minen<\/p>\n
Hanki etuliite ja pienennyssis\u00e4lt\u00f6<\/h3>\n
Voit ladata polyfill- ja minifikaatiotiedoston ja \/webpack.config.js<\/code>niihin liittyv\u00e4t \/package.json<\/code>tiedostot GitHub<\/a> -sis\u00e4ll\u00f6st\u00e4 .<\/p>\n
Valmiissa kokoonpanossa on my\u00f6s muutama bonus. T\u00e4ss\u00e4 on nopea yleiskatsaus jokaiseen.<\/p>\n
Nukkaa ja siivoa CSS automaattisesti<\/h3>\n
Voit alustaa, korjata ja siivota Sassin samalla kun teet t\u00e4m\u00e4n asentamalla seuraavat paketit:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Tallenna my\u00f6s seuraava tiedosto kokoonpanoosi nimell\u00e4 .stylelintrc<\/code>. T\u00e4m\u00e4 perii palvelun tarjoamat oletusasetukset stylelint-config-standard<\/code>ja lis\u00e4\u00e4 muutamia lis\u00e4ominaisuuksia, mukaan lukien aakkosj\u00e4rjestyksen.<\/p>\n
Voit m\u00e4\u00e4ritt\u00e4\u00e4 t\u00e4m\u00e4n tiedoston mieltymystesi mukaan k\u00e4ytt\u00e4m\u00e4ll\u00e4 Styleline-dokumentaation<\/a> ohjeita .<\/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
Tee nyt \/src\/editor.scss<\/code>tiedostossasi Sassista hieman sotkuinen ja lis\u00e4\u00e4 pari testis\u00e4\u00e4nt\u00f6\u00e4, kuten esimerkiksi:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
Nyt kun suoritat npm start<\/code>hit savea, se siivotaan ja aakkosj\u00e4rjestet\u00e4\u00e4n automaattisesti seuraavasti:<\/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
Huomaa, ett\u00e4 jotkin .stylelintrc<\/code>tiedostooni lis\u00e4\u00e4mist\u00e4ni s\u00e4\u00e4nn\u00f6ist\u00e4 on otettu k\u00e4ytt\u00f6\u00f6n, kuten:<\/p>\n