{"id":228107,"date":"2022-10-15T14:36:00","date_gmt":"2022-10-15T11:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228107"},"modified":"2022-11-09T00:45:39","modified_gmt":"2022-11-08T21:45:39","slug":"ytterligare-konfiguration-foer-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/ytterligare-konfiguration-foer-webpack\/","title":{"rendered":"Ytterligare konfiguration f\u00f6r webpack"},"content":{"rendered":"\n

Den h\u00e4r artikeln bygger p\u00e5 webpack.config.js<\/code>filen vi skapade i artikeln Extending the WordPress Create Block Script webpack Config<\/a>. Om du inte har l\u00e4st den artikeln kanske du vill l\u00e4sa den snabbt.<\/p>\n

Den h\u00e4r artikeln \u00e4r f\u00f6r en \u00e4ldre version av Create Block Script<\/strong><\/p>\n

\u00c4ven om teorin fortfarande kan till\u00e4mpas, kanske en del av informationen i den h\u00e4r artikeln inte l\u00e4ngre \u00e4r kompatibel med det senaste skapa blockskriptet. Du kan se v\u00e5r uppdaterade Skapa Block-skriptguide h\u00e4r<\/a>.<\/p>\n

Vi har ocks\u00e5 en uppdaterad guide om att l\u00e4gga till ytterligare ing\u00e5ngspunkter till webpack<\/a>.<\/p>\n

St\u00f6der CSS Cross Browser med Polyfills och prefix<\/h2>\n

Innan vi hoppar in vill jag ge kredit till Jeffrey Carandang<\/a> f\u00f6r hans fantastiska artikel om att anv\u00e4nda PostCSS med webpack<\/a>, f\u00f6r vilken jag h\u00e4mtade inspiration till det h\u00e4r avsnittet av artikeln.<\/p>\n

F\u00f6r att st\u00f6dja polyfills och Cross-Browser-prefix kommer vi att anv\u00e4nda postcss-loader<\/code>paketet npm f\u00f6r att ladda insticksprogrammet [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

Se till att vi \u00e4r cd<\/code>editerade i roten av v\u00e5rt plugin och k\u00f6r f\u00f6ljande f\u00f6r att installera dessa tv\u00e5 paket.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
D\u00e4refter m\u00e5ste vi ut\u00f6ka v\u00e5r \/webpack.config.js<\/code>till att inkludera konfigurationen f\u00f6r dessa tv\u00e5 paket:<\/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
Observera \u00e4ndringarna p\u00e5 rad 4 och 18.<\/p>\n
Testar Autoprefixer<\/h3>\n
L\u00e5t oss l\u00e4gga till lite kod till v\u00e5r \/src\/sass\/style.scss<\/code>fil f\u00f6r att testa autoprefixer-funktionen f\u00f6r PostCSS-plugin. Jag kommer att infoga n\u00e5gra regler f\u00f6r ::placeholder<\/code>i filen, som \u00e4nnu inte har fullt webbl\u00e4sarst\u00f6d.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
I v\u00e5r kompilerade \/style.css<\/code>fil matas nu f\u00f6ljande ut:<\/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
Testar Polyfills<\/h3>\n
L\u00e5t oss l\u00e4gga till lite kod till v\u00e5r \/src\/sass\/style.scss<\/code>fil f\u00f6r att testa polyfill-funktionen f\u00f6r PostCSS-plugin. Jag kommer att infoga n\u00e5gra regler f\u00f6r all<\/code>egenskapen (som \u00e5terst\u00e4ller en elements egenskaper) i filen, som \u00e4nnu inte har fullt webbl\u00e4sarst\u00f6d.<\/p>\n
I v\u00e5r kompilerade \/style.css<\/code>fil matas nu f\u00f6ljande ut:<\/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
Nu \u00e4r det mycket CSS!<\/p>\n
F\u00f6rminska utdata<\/h2>\n
Vi kan ladda v\u00e5ra JavaScript- och CSS-tillg\u00e5ngar snabbare genom att se till att de minifieras. F\u00f6r att g\u00f6ra detta kan vi l\u00e4gga till ett par extra plugins i v\u00e5r build.<\/p>\n
Minifiera CSS med webpack<\/h3>\n
F\u00f6r att minifiera CSS kommer vi att anv\u00e4nda optimize-css-assets-webpack-plugin<\/code>paketet npm<\/a>.<\/p>\n
Se till att du \u00e4r cd<\/code>redigerad i roten av ditt plugin och k\u00f6r f\u00f6ljande kommando i din terminal:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
G\u00f6r nu f\u00f6ljande \u00e4ndringar i din \/webpack.config.js<\/code>fil:<\/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
Notera importen p\u00e5 rad 4, vi s\u00e4ger \u00e5t webpack att minimera p\u00e5 rad 32, och plugin-programmet laddas p\u00e5 rad 33.<\/p>\n
Nu n\u00e4r vi k\u00f6r npm start<\/code>kan vi unders\u00f6ka en av v\u00e5ra CSS-filer i roten av plugin-programmet f\u00f6r att se resultatet. S\u00e5 h\u00e4r \/style.css<\/code>ser det ut nu:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
Den har tagit bort alla kommentarer, mellanslag och lagt allt p\u00e5 en rad, vilket har minskat storleken p\u00e5 filen.<\/p>\n
F\u00f6rminska JavaScript med webpack<\/h3>\n
Om vi \u200b\u200btar en titt p\u00e5 \/build\/index.js<\/code>filen \u00e4r den ganska l\u00e5ng. Den h\u00e4r filen kan ocks\u00e5 ha en viss minifiering.<\/p>\n
F\u00f6r att g\u00f6ra detta kommer vi att anv\u00e4nda terser-webpack-plugin<\/code>npm-paketet<\/a>.<\/p>\n
Se till att du \u00e4r cd<\/code>redigerad i roten av ditt plugin och k\u00f6r f\u00f6ljande kommando i din terminal:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
G\u00f6r nu f\u00f6ljande \u00e4ndringar i din \/webpack.config.js<\/code>fil:<\/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
Notera importen p\u00e5 rad 7 och till\u00e4gget till minimeraren p\u00e5 rad 36.<\/p>\n
Om vi \u200b\u200bnu inspekterar v\u00e5r \/build\/index.js<\/code>fil har JavaScript minifierats.<\/p>\n
F\u00f6rminska JavaScript<\/p>\n
H\u00e4mta prefixet och minifieringssammanfattningen<\/h3>\n
Du kan ladda ner polyfill- och minifieringsfilen \/webpack.config.js<\/code>och de medf\u00f6ljande \/package.json<\/code>filerna fr\u00e5n GitHub-\u00f6versikten<\/a>.<\/p>\n
Den f\u00e4rdiga konfigurationen inneh\u00e5ller ocks\u00e5 n\u00e5gra extrafunktioner. H\u00e4r \u00e4r en snabb \u00f6versikt \u00f6ver var och en.<\/p>\n
Luta och st\u00e4da automatiskt din CSS<\/h3>\n
Du kan formatera, autofixa och st\u00e4da upp din Sass n\u00e4r du g\u00e5r, f\u00f6r att g\u00f6ra detta installera f\u00f6ljande paket:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Spara \u00e4ven f\u00f6ljande fil i din konfiguration med namnet .stylelintrc<\/code>. Detta \u00e4rver standardinst\u00e4llningarna som tillhandah\u00e5lls av stylelint-config-standard<\/code>, och l\u00e4gger till n\u00e5gra extrafunktioner, inklusive alfabetisk ordning.<\/p>\n
Du kan konfigurera den h\u00e4r filen efter dina \u00f6nskem\u00e5l genom att anv\u00e4nda v\u00e4gledningen i Styleline-dokumentationen<\/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
G\u00f6r nu din Sass lite r\u00f6rig i din \/src\/editor.scss<\/code>fil och l\u00e4gg till ett par testregler, som s\u00e5:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
Nu n\u00e4r du k\u00f6r npm start<\/code>tr\u00e4ffen spara kommer den automatiskt att ordnas och alfabetiseras s\u00e5 h\u00e4r:<\/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
Observera att n\u00e5gra av reglerna jag har lagt till i min .stylelintrc<\/code>fil har implementerats, till exempel:<\/p>\n