Ytterligare konfiguration för webpack
Den här artikeln bygger på webpack.config.jsfilen vi skapade i artikeln Extending the WordPress Create Block Script webpack Config. Om du inte har läst den artikeln kanske du vill läsa den snabbt.
Den här artikeln är för en äldre version av Create Block Script
Även om teorin fortfarande kan tillämpas, kanske en del av informationen i den här artikeln inte längre är kompatibel med det senaste skapa blockskriptet. Du kan se vår uppdaterade Skapa Block-skriptguide här.
Vi har också en uppdaterad guide om att lägga till ytterligare ingångspunkter till webpack.
Stöder CSS Cross Browser med Polyfills och prefix
Innan vi hoppar in vill jag ge kredit till Jeffrey Carandang för hans fantastiska artikel om att använda PostCSS med webpack, för vilken jag hämtade inspiration till det här avsnittet av artikeln.
För att stödja polyfills och Cross-Browser-prefix kommer vi att använda postcss-loaderpaketet npm för att ladda insticksprogrammet [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).
Se till att vi är cdediterade i roten av vårt plugin och kör följande för att installera dessa två paket.
npm install postcss-loader postcss-preset-env --save-dev
Därefter måste vi utöka vår /webpack.config.jstill att inkludera konfigurationen för dessa två paket:
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;
}
Observera ändringarna på rad 4 och 18.
Testar Autoprefixer
Låt oss lägga till lite kod till vår /src/sass/style.scssfil för att testa autoprefixer-funktionen för PostCSS-plugin. Jag kommer att infoga några regler för ::placeholderi filen, som ännu inte har fullt webbläsarstöd.
::placeholder {
color: #f00;
}
I vår kompilerade /style.cssfil matas nu följande ut:
::-webkit-input-placeholder {
color: #f00; }
::-moz-placeholder {
color: #f00; }
:-ms-input-placeholder {
color: #f00; }
::-ms-input-placeholder {
color: #f00; }
::placeholder {
color: #f00; }
Testar Polyfills
Låt oss lägga till lite kod till vår /src/sass/style.scssfil för att testa polyfill-funktionen för PostCSS-plugin. Jag kommer att infoga några regler för allegenskapen (som återställer en elements egenskaper) i filen, som ännu inte har fullt webbläsarstöd.
I vår kompilerade /style.cssfil matas nu följande ut:
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; }
Nu är det mycket CSS!
Förminska utdata
Vi kan ladda våra JavaScript- och CSS-tillgångar snabbare genom att se till att de minifieras. För att göra detta kan vi lägga till ett par extra plugins i vår build.
Minifiera CSS med webpack
För att minifiera CSS kommer vi att använda optimize-css-assets-webpack-pluginpaketet npm.
Se till att du är cdredigerad i roten av ditt plugin och kör följande kommando i din terminal:
npm install optimize-css-assets-webpack-plugin --save-dev
Gör nu följande ändringar i din /webpack.config.jsfil:
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;
}
Notera importen på rad 4, vi säger åt webpack att minimera på rad 32, och plugin-programmet laddas på rad 33.
Nu när vi kör npm startkan vi undersöka en av våra CSS-filer i roten av plugin-programmet för att se resultatet. Så här /style.cssser det ut nu:
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}
Den har tagit bort alla kommentarer, mellanslag och lagt allt på en rad, vilket har minskat storleken på filen.
Förminska JavaScript med webpack
Om vi tar en titt på /build/index.jsfilen är den ganska lång. Den här filen kan också ha en viss minifiering.
För att göra detta kommer vi att använda terser-webpack-pluginnpm-paketet.
Se till att du är cdredigerad i roten av ditt plugin och kör följande kommando i din terminal:
npm install terser-webpack-plugin --save-dev
Gör nu följande ändringar i din /webpack.config.jsfil:
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;
}
Notera importen på rad 7 och tillägget till minimeraren på rad 36.
Om vi nu inspekterar vår /build/index.jsfil har JavaScript minifierats.
Förminska JavaScript
Hämta prefixet och minifieringssammanfattningen
Den färdiga konfigurationen innehåller också några extrafunktioner. Här är en snabb översikt över var och en.
Luta och städa automatiskt din CSS
Du kan formatera, autofixa och städa upp din Sass när du går, för att göra detta installera följande paket:
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev
Spara även följande fil i din konfiguration med namnet .stylelintrc. Detta ärver standardinställningarna som tillhandahålls av stylelint-config-standard, och lägger till några extrafunktioner, inklusive alfabetisk ordning.
Du kan konfigurera den här filen efter dina önskemål genom att använda vägledningen i Styleline-dokumentationen.
{
"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",
}
}
Gör nu din Sass lite rörig i din /src/editor.scssfil och lägg till ett par testregler, som så:
.wp-block-wcltd-wholesome-notes{
border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}
Nu när du kör npm startträffen spara kommer den automatiskt att ordnas och alfabetiseras så här:
.wp-block-wcltd-wholesome-notes {
background: url('https://via.placeholder.com/150');
border: 1px dotted #ff0000;
}
Observera att några av reglerna jag har lagt till i min .stylelintrcfil har implementerats, till exempel:
- Använder fullständiga hexadecimala värden för färger.
- Alfabetisering av fastigheter.
- Enstaka citattecken för strängar.
- Genomföra citattecken för webbadresser
Få Friendly Errors från webpack
Du kan göra dina webbpaketsfel mycket lättare att läsa genom att installera paketet npm friendly-errors-webpack-plugin.
Installera plugin-programmet på vanligt sätt med din terminal:
npm install friendly-errors-webpack-plugin --save-dev
Nu, om du har ett fel i din JavaScript, blir utdata mycket vänligare än tidigare.
Innan plugin:
Efter plugin:
