{"id":228625,"date":"2022-10-15T14:31:00","date_gmt":"2022-10-15T11:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228625"},"modified":"2022-11-09T03:19:42","modified_gmt":"2022-11-09T00:19:42","slug":"configuration-supplementaire-pour-webpack","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/configuration-supplementaire-pour-webpack\/","title":{"rendered":"Configuration suppl\u00e9mentaire pour webpack"},"content":{"rendered":"\n

Cet article s’appuie sur le webpack.config.js<\/code>fichier que nous avons cr\u00e9\u00e9 dans l’article Extending the WordPress Create Block Script webpack Config<\/a>. Si vous n’avez pas lu cet article, vous voudrez peut-\u00eatre lui donner une lecture rapide.<\/p>\n

Cet article concerne une ancienne version du script de cr\u00e9ation de bloc<\/strong><\/p>\n

Bien que la th\u00e9orie puisse toujours \u00eatre appliqu\u00e9e, certaines des informations contenues dans cet article peuvent ne plus \u00eatre compatibles avec le dernier script de bloc de cr\u00e9ation. Vous pouvez consulter notre guide de cr\u00e9ation de script de bloc mis \u00e0 jour ici<\/a>.<\/p>\n

Nous avons \u00e9galement un guide mis \u00e0 jour sur l’ajout de points d’entr\u00e9e suppl\u00e9mentaires \u00e0 Webpack<\/a>.<\/p>\n

Prise en charge du navigateur crois\u00e9 CSS avec polyfills et pr\u00e9fixes<\/h2>\n

Avant de nous lancer, je tiens \u00e0 rendre hommage \u00e0 Jeffrey Carandang<\/a> pour son article g\u00e9nial sur l’utilisation de PostCSS avec webpack<\/a>, pour lequel je me suis inspir\u00e9 pour cette section de l’article.<\/p>\n

Pour prendre en charge les polyfills et les pr\u00e9fixes Cross-Browser, nous allons utiliser le postcss-loader<\/code>package npm pour charger le plugin [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

En vous assurant que nous sommes cd<\/code>\u00e0 la racine de notre plugin, ex\u00e9cutez ce qui suit pour installer ces deux packages.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
Ensuite, nous devons \u00e9tendre notre \/webpack.config.js<\/code>pour inclure la configuration de ces deux packages\u00a0:<\/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
Notez les modifications aux lignes 4 et 18.<\/p>\n
Tester le pr\u00e9fixe automatique<\/h3>\n
Ajoutons du code \u00e0 notre \/src\/sass\/style.scss<\/code>fichier pour tester la fonction autoprefixer du plugin PostCSS. Je vais ins\u00e9rer quelques r\u00e8gles ::placeholder<\/code>dans le fichier, qui n’est pas encore enti\u00e8rement compatible avec le navigateur.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
Dans notre fichier compil\u00e9 \/style.css<\/code>, ce qui suit est maintenant sorti\u00a0:<\/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
Tester les polyfills<\/h3>\n
Ajoutons du code \u00e0 notre \/src\/sass\/style.scss<\/code>fichier pour tester la fonction polyfill du plugin PostCSS. J’ins\u00e9rerai quelques r\u00e8gles pour la all<\/code>propri\u00e9t\u00e9 (qui r\u00e9initialise les propri\u00e9t\u00e9s d’un \u00e9l\u00e9ment) dans le fichier, qui n’a pas encore de prise en charge compl\u00e8te du navigateur.<\/p>\n
Dans notre fichier compil\u00e9 \/style.css<\/code>, ce qui suit est maintenant sorti\u00a0:<\/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
\u00c7a fait beaucoup de CSS\u00a0!<\/p>\n
Minification de la sortie<\/h2>\n
Nous pouvons charger nos actifs JavaScript et CSS plus rapidement en nous assurant qu’ils sont minifi\u00e9s. Pour ce faire, nous pouvons ajouter quelques plugins suppl\u00e9mentaires dans notre build.<\/p>\n
Minifier CSS avec webpack<\/h3>\n
Pour minifier le CSS, nous allons utiliser le optimize-css-assets-webpack-plugin<\/code>package npm<\/a>.<\/p>\n
Assurez-vous cd<\/code>d’\u00eatre connect\u00e9 \u00e0 la racine de votre plugin et ex\u00e9cutez la commande suivante dans votre terminal\u00a0:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
Apportez maintenant les modifications suivantes \u00e0 votre \/webpack.config.js<\/code>fichier\u00a0:<\/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
Notez l’importation \u00e0 la ligne 4, nous disant \u00e0 webpack de minimiser \u00e0 la ligne 32, et le plugin en cours de chargement \u00e0 la ligne 33.<\/p>\n
Maintenant, lorsque nous ex\u00e9cutons, npm start<\/code>nous pouvons examiner l’un de nos fichiers CSS \u00e0 la racine du plugin pour voir la sortie. Voici \u00e0 quoi \/style.css<\/code>ressemble maintenant\u00a0:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
Il a supprim\u00e9 tous les commentaires, les espaces et tout mis sur une seule ligne, ce qui a r\u00e9duit la taille du fichier.<\/p>\n
Minimiser JavaScript avec webpack<\/h3>\n
Si on regarde le \/build\/index.js<\/code>dossier, il est assez long. Ce fichier pourrait \u00e9galement faire l’objet d’une minification.<\/p>\n
Pour ce faire, nous allons utiliser le terser-webpack-plugin<\/code>package npm<\/a>.<\/p>\n
Assurez-vous cd<\/code>d’\u00eatre connect\u00e9 \u00e0 la racine de votre plugin et ex\u00e9cutez la commande suivante dans votre terminal\u00a0:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
Apportez maintenant les modifications suivantes \u00e0 votre \/webpack.config.js<\/code>fichier\u00a0:<\/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
Notez l’importation \u00e0 la ligne 7 et l’ajout au minimiseur \u00e0 la ligne 36.<\/p>\n
Maintenant, si nous inspectons notre \/build\/index.js<\/code>fichier, le JavaScript a \u00e9t\u00e9 minifi\u00e9.<\/p>\n
Minimiser le JavaScript<\/p>\n
Obtenez le pr\u00e9fixe et l’essentiel de la minification<\/h3>\n
Vous pouvez t\u00e9l\u00e9charger le fichier polyfill et minification \/webpack.config.js<\/code>et les fichiers qui l’accompagnent \/package.json<\/code>depuis le gist GitHub<\/a>.<\/p>\n
La configuration finale contient \u00e9galement quelques extras bonus. Voici un aper\u00e7u rapide de chacun.<\/p>\n
Lint et range automatiquement votre CSS<\/h3>\n
Vous pouvez formater, r\u00e9parer automatiquement et ranger votre Sass au fur et \u00e0 mesure, pour ce faire installez les packages suivants :<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Enregistrez \u00e9galement le fichier suivant dans votre configuration avec le nom .stylelintrc<\/code>. Cela h\u00e9rite des valeurs par d\u00e9faut fournies par stylelint-config-standard<\/code>, et ajoute quelques bonus suppl\u00e9mentaires, y compris l’ordre alphab\u00e9tique.<\/p>\n
Vous pouvez configurer ce fichier selon vos pr\u00e9f\u00e9rences en suivant les instructions de la documentation Styleline<\/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
Maintenant, dans votre \/src\/editor.scss<\/code>fichier, rendez votre Sass un peu d\u00e9sordonn\u00e9 et ajoutez quelques r\u00e8gles de test, comme ceci :<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
Maintenant, lorsque vous lancez la npm start<\/code>sauvegarde, il sera automatiquement rang\u00e9 et class\u00e9 par ordre alphab\u00e9tique comme suit\u00a0:<\/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
Notez que certaines des r\u00e8gles que j’ai ajout\u00e9es dans mon .stylelintrc<\/code>fichier ont \u00e9t\u00e9 impl\u00e9ment\u00e9es, telles que\u00a0:<\/p>\n