See artikkel põhineb webpack.config.jsfailil, mille lõime artiklis WordPressi loomisplokkskripti veebipaketi konfiguratsiooni laiendamine. Kui te pole seda artiklit lugenud, võiksite seda kiiresti lugeda.
See artikkel on mõeldud ploki skripti loomise vanemale versioonile
Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga ühilduda. Meie uuendatud plokiskripti loomise juhendit saate vaadata siit .
Meil on ka uuendatud juhend veebipakki täiendavate sisenemispunktide lisamise kohta.
CSS-i ristbrauseri toetamine polütäite ja eesliidetega
Enne kui sekkume, tahan avaldada tunnustust Jeffrey Carandangile tema suurepärase artikli eest PostCSS-i kasutamise kohta veebipaketiga, mille jaoks sain artikli selle jaotise jaoks inspiratsiooni.
Polütäidete ja brauseriüleste eesliidete toetamiseks kasutame postcss-loaderpistikprogrammi laadimiseks paketti npm [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Veendumaks, et oleme cdoma pistikprogrammi juurtes, käivitage nende kahe paketi installimiseks järgmine.
npm install postcss-loader postcss-preset-env --save-dev
Järgmisena peame laiendama oma /webpack.config.jskonfiguratsiooni nende kahe paketi jaoks:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const postcssPresetEnv = require( 'postcss-preset-env' );
const production = 'development' !== process.env.NODE_ENV;
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins:() => [ postcssPresetEnv( { stage: 3 }) ],
},
},
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style.s[ac]ss$/i,
},
default: false,
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
],
};
if (production) {
module.exports.devtool = false;
}
Pange tähele muudatusi ridadel 4 ja 18.
Autoprefikseri testimine
Lisame oma /src/sass/style.scssfailile koodi, et testida PostCSS-i pistikprogrammi automaatprefiksi funktsiooni. Lisan mõned reeglid ::placeholderfaili, millel pole veel täielikku brauseri tuge.
::placeholder {
color: #f00;
}
Meie koostatud /style.cssfailis väljastatakse nüüd järgmine:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Polütäidete testimine
Lisame oma /src/sass/style.scssfailile koodi, et testida PostCSS-i pistikprogrammi polütäite funktsiooni. Sisestan mõned atribuudi reeglid all(mis lähtestab elementide omadused) faili, millel pole veel täielikku brauseri tuge.
Meie koostatud /style.cssfailis väljastatakse nüüd järgmine:
a {
-webkit-animation: none 0s ease 0s 1 normal none running;
animation: none 0s ease 0s 1 normal none running;
-webkit-backface-visibility: visible;
backface-visibility: visible;
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
border: medium none currentColor;
border-collapse: separate;
-o-border-image: none;
border-image: none;
border-radius: 0;
border-spacing: 0;
bottom: auto;
box-shadow: none;
box-sizing: content-box;
caption-side: top;
clear: none;
clip: auto;
color: #000;
-webkit-columns: auto;
-moz-columns: auto;
columns: auto;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
grid-column-gap: normal;
-webkit-column-gap: normal;
-moz-column-gap: normal;
column-gap: normal;
-webkit-column-rule: medium none currentColor;
-moz-column-rule: medium none currentColor;
column-rule: medium none currentColor;
-webkit-column-span: 1;
-moz-column-span: 1;
column-span: 1;
-webkit-column-width: auto;
-moz-column-width: auto;
column-width: auto;
content: normal;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: ltr;
display: inline;
empty-cells: show;
float: none;
font-family: serif;
font-size: medium;
font-style: normal;
font-feature-settings: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
line-height: normal;
height: auto;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
left: auto;
letter-spacing: normal;
list-style: disc outside none;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
orphans: 2;
outline: medium none invert;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding: 0;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
perspective: none;
perspective-origin: 50% 50%;
position: static;
right: auto;
-moz-tab-size: 8;
-o-tab-size: 8;
tab-size: 8;
table-layout: auto;
text-align: left;
-moz-text-align-last: auto;
text-align-last: auto;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
transform: none;
transform-origin: 50% 50% 0;
transform-style: flat;
transition: none 0s ease 0s;
unicode-bidi: normal;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: 2;
width: auto;
word-spacing: normal;
z-index: auto;
all: initial; }
Nüüd on see palju CSS-i!
Väljundi minimeerimine
Saame oma JavaScripti ja CSS-i varad kiiremini laadida, tagades nende minimeerimise. Selleks saame oma konstruktsiooni lisada paar lisapluginat.
CSS-i vähendamine veebipaketiga
CSS-i vähendamiseks kasutame optimize-css-assets-webpack-pluginpaketti npm.
Veenduge, et olete cdsisenenud oma pistikprogrammi juure ja käivitage terminalis järgmine käsk:
npm install optimize-css-assets-webpack-plugin --save-dev
/webpack.config.jsNüüd tehke oma failis järgmised muudatused .
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const postcssPresetEnv = require( 'postcss-preset-env' );
const production = 'development' !== process.env.NODE_ENV;
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins:() => [ postcssPresetEnv( { stage: 3 }) ],
},
},
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
minimize: true,
minimizer: [ new OptimizeCssAssetsWebpackPlugin() ],
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
if (production) {
module.exports.devtool = false;
}
Pange tähele importi 4. real, käske meil veebipaketil minimeerida real 32 ja pistikprogrammi laadimist real 33.
Nüüd, kui käivitame npm start, saame väljundi nägemiseks uurida ühte oma CSS-failidest pistikprogrammi juurtes. Siin /style.cssnäeb praegune välja:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
See on eemaldanud kõik kommentaarid, tühikud ja asetanud kõik ühele reale, mis on vähendanud faili suurust.
JavaScripti vähendamine veebipaketiga
Kui vaatame /build/index.jsfaili, on see üsna pikk. Seda faili saab ka minimeerida.
Selleks kasutame terser-webpack-pluginpaketti npm.
Veenduge, et olete cdsisenenud oma pistikprogrammi juure ja käivitage terminalis järgmine käsk:
npm install terser-webpack-plugin --save-dev
/webpack.config.jsNüüd tehke oma failis järgmised muudatused .
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const postcssPresetEnv = require( 'postcss-preset-env' );
const production = 'development' !== process.env.NODE_ENV;
const TerserWebPackPlugin = require( 'terser-webpack-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: () => [ postcssPresetEnv( { stage: 3 }) ],
},
},
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
minimize: true,
minimizer: [
new OptimizeCssAssetsWebpackPlugin(),
new TerserWebPackPlugin(),
],
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
if (production) {
module.exports.devtool = false;
}
Pange tähele importi real 7 ja minimeerija lisamist real 36.
Nüüd, kui me oma /build/index.jsfaili kontrollime, on JavaScripti vähendatud.
JavaScripti minimeerimine
Hankige eesliide ja minimeerimispõhimõtted
Polütäite- ja minimeerimisfaili /webpack.config.jsning kaasnevad/package.json failid saate alla laadida GitHubi sisust.
Valmis konfiguratsioon sisaldab ka mõningaid boonuslisasid. Siin on kiire ülevaade igaühest.
Kiutage ja korrastage oma CSS automaatselt
Saate oma Sassi vormindada, automaatselt parandada ja korrastada, installides selleks järgmised paketid:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Salvestage oma konfiguratsiooni ka järgmine fail nimega .stylelintrc. See pärib poolt pakutavad vaikeseaded stylelint-config-standardja lisab mõned lisad, sealhulgas tähestikuline järjestus.
Saate selle faili oma eelistuste järgi konfigureerida, kasutades Styleline’i dokumentatsiooni juhiseid .
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-order"
],
"rules": {
"color-hex-length": "long",
"font-family-name-quotes": null,
"function-url-quotes": "always",
"indentation": "tab",
"max-empty-lines": 2,
"number-leading-zero": "never",
"order/order": [
"custom-properties",
"declarations"
],
"order/properties-alphabetical-order": true,
"string-quotes": "single",
}
}
Nüüd /src/editor.scssmuutke oma failis Sass pisut segaseks ja lisage paar testireeglit, näiteks:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Nüüd, kui kasutate npm startnuppu Salvesta, korrastatakse see automaatselt ja järjestatakse tähestikuga järgmiselt:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Pange tähele, et mõned minu .stylelintrcfaili lisatud reeglid on rakendatud, näiteks:
- Värvide jaoks täiskuueteistkümnendväärtuste kasutamine.
- Omaduste tähestikuline järjestamine.
- Üksikud jutumärgid stringidele.
- Jutumärkide jõustamine URL-idele
Hankige veebipaketist sõbralikud vead
Saate muuta oma veebipaketi vead palju hõlpsamini loetavaks, installides paketi npm friendly-errors-webpack-plugin.
Installige pistikprogramm oma terminaliga tavapärasel viisil:
npm install friendly-errors-webpack-plugin --save-dev
Nüüd, kui teie JavaScriptis on viga, on väljund palju sõbralikum kui varem.
Enne pistikprogrammi:
Pärast pistikprogrammi:
