Webpackin lisäasetukset

Tämä artikkeli perustuu webpack.config.jstiedoston päälle, jonka loimme artikkelissa WordPressin Luo Block Script -verkkopaketin kokoonpanon laajentaminen. Jos et ole lukenut tätä artikkelia, sinun kannattaa lukea se nopeasti.

Tämä artikkeli koskee Luo lohkokomentosarjan vanhempaa versiota

Vaikka teoriaa voidaan edelleen soveltaa, jotkin tämän artikkelin tiedoista eivät ehkä ole enää yhteensopivia uusimman luontilohkokomentosarjan kanssa. Voit tarkastella päivitettyä Luo Block Script -oppaamme täältä.

Meillä on myös päivitetty opas uusien sisääntulokohtien lisäämisestä webpackiin.

Tukee CSS-ristiselainta polytäytteillä ja etuliitteillä

Ennen kuin aloitamme, haluan antaa tunnustusta Jeffrey Carandangille hänen mahtavasta artikkelistaan ​​PostCSS:n käyttämisestä verkkopaketin kanssa, jota varten sain inspiraation artikkelin tähän osioon.

Tukeaksemme monitäytteitä ja Cross-Browser-etuliitteitä aiomme käyttää postcss-loadernpm-pakettia laajennuksen lataamiseen [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env).

Varmista, että olemme cdperehtyneet laajennuksen juureen, suorita seuraava näiden kahden paketin asentamiseksi.

npm install postcss-loader postcss-preset-env --save-dev

Seuraavaksi meidän on laajennettava /webpack.config.jssisällyttämään näiden kahden paketin määritykset:

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;
}

Huomaa muutokset riveillä 4 ja 18.

Autoprefixerin testaus

Lisätään /src/sass/style.scsstiedostoomme koodia PostCSS-laajennuksen automaattisen prefixer-toiminnon testaamiseksi. Lisään joitain sääntöjä ::placeholdertiedostoon, jolla ei vielä ole täyttä selaintukea.

::placeholder {
    color: #f00;
}

Käännetyssä /style.csstiedostossamme tulostetaan nyt seuraava:

::-webkit-input-placeholder {
  color: #f00; }

::-moz-placeholder {
  color: #f00; }

:-ms-input-placeholder {
  color: #f00; }

::-ms-input-placeholder {
  color: #f00; }

::placeholder {
  color: #f00; }

Polyfillien testaus

Lisätään /src/sass/style.scsstiedostoomme koodia PostCSS-laajennuksen polyfill-toiminnon testaamiseksi. Lisään joitain sääntöjä allominaisuudelle (joka nollaa elementin ominaisuudet) tiedostoon, jolla ei vielä ole täyttä selaintukea.

Käännetyssä /style.csstiedostossamme tulostetaan nyt seuraava:

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; }

Nyt se on paljon CSS:ää!

Ulostulon pienentäminen

Voimme ladata JavaScript- ja CSS-resurssimme nopeammin varmistamalla, että ne on minimoitu. Tätä varten voimme lisätä pari lisälaajennusta rakentamiseen.

CSS:n pienentäminen webpackilla

CSS:n minimoimiseksi aiomme käyttää optimize-css-assets-webpack-pluginnpm-pakettia.

Varmista, että olet cdpäässyt laajennuksen juureen ja suorita seuraava komento päätteessäsi:

npm install optimize-css-assets-webpack-plugin --save-dev

Tee nyt /webpack.config.jstiedostoosi seuraavat muutokset:

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;
}

Huomaa tuonti rivillä 4, meitä käskee webpack minimoida rivillä 32 ja laajennus ladataan riville 33.

Nyt kun suoritamme, npm startvoimme tutkia yhtä CSS-tiedostoistamme laajennuksen juuressa nähdäksemme tulosteen. Tältä /style.cssnyt näyttää:

.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}

Se on poistanut kaikki kommentit, välilyönnit ja laittanut kaiken yhdelle riville, mikä on pienentänyt tiedoston kokoa.

JavaScriptin pienentäminen webpackilla

Jos katsomme /build/index.jstiedostoa, se on melko pitkä. Tämä tiedosto voisi myös tehdä pienennyksen.

Tätä varten aiomme käyttää terser-webpack-pluginnpm-pakettia.

Varmista, että olet cdpäässyt laajennuksen juureen ja suorita seuraava komento päätteessäsi:

npm install terser-webpack-plugin  --save-dev

Tee nyt /webpack.config.jstiedostoosi seuraavat muutokset:

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;
}

Huomaa tuonti rivillä 7 ja lisäys minimointiin rivillä 36.

Jos nyt tarkastelemme /build/index.jstiedostoamme, JavaScript on pienennetty.

JavaScriptin pienentäminen

Hanki etuliite ja pienennyssisältö

Voit ladata polyfill- ja minifikaatiotiedoston ja /webpack.config.jsniihin liittyvät /package.jsontiedostot GitHub -sisällöstä .

Valmiissa kokoonpanossa on myös muutama bonus. Tässä on nopea yleiskatsaus jokaiseen.

Nukkaa ja siivoa CSS automaattisesti

Voit alustaa, korjata ja siivota Sassin samalla kun teet tämän asentamalla seuraavat paketit:

npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev

Tallenna myös seuraava tiedosto kokoonpanoosi nimellä .stylelintrc. Tämä perii palvelun tarjoamat oletusasetukset stylelint-config-standardja lisää muutamia lisäominaisuuksia, mukaan lukien aakkosjärjestyksen.

Voit määrittää tämän tiedoston mieltymystesi mukaan käyttämällä Styleline-dokumentaation ohjeita .

{
    "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",
    }
}

Tee nyt /src/editor.scsstiedostossasi Sassista hieman sotkuinen ja lisää pari testisääntöä, kuten esimerkiksi:

.wp-block-wcltd-wholesome-notes{
  border: 1px dotted #f00; background: url("https://via.placeholder.com/150");}

Nyt kun suoritat npm starthit savea, se siivotaan ja aakkosjärjestetään automaattisesti seuraavasti:

.wp-block-wcltd-wholesome-notes {
    background: url('https://via.placeholder.com/150');
    border: 1px dotted #ff0000;
}

Huomaa, että jotkin .stylelintrctiedostooni lisäämistäni säännöistä on otettu käyttöön, kuten:

• Täysi hex-arvojen käyttäminen väreille.
• Kiinteistöjen aakkosjärjestys.
• Yksittäiset lainaukset merkkijonoista.
• Lainausmerkkien pakottaminen URL-osoitteille

Hanki ystävällisiä virheitä webpackista

Voit tehdä webpack-virheistäsi paljon helpommin luettavia asentamalla npm-paketin friendly-errors-webpack-plugin.

Asenna laajennus tavalliseen tapaan päätelaitteen kanssa:

npm install friendly-errors-webpack-plugin --save-dev

Nyt, jos JavaScriptissäsi on virhe, tulos on paljon ystävällisempi kuin ennen.

Ennen laajennusta:

Plugin jälkeen: