Webpack, retour d'expérience

Par Franck, . Lien permanent Brèves

La motocyclette, mai 2015
La motocyclette

Après Parcel j’ai testé Webpack et autant le dire tout de suite, c’est pas concluant sauf que…

Je suis tout de même arrivé à mes fins avec une installation globale des modules Node — merci Yarn —pnp suggéré par @ldbglobe que je remercie — et à produire un fichier CSS à partir du fichier Sass, par contre pas moyen de trouver, pour l’instant, comment minifier le résultat (j’ai du louper le plugin qui va bien).

Pour l’instant mon fichier package.json ressemble à ça :

{
  "name": "ensemble",
  "version": "1.0.0",
  "description": "Dotclear 2 theme",
  "scripts": {
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/franck-paul/ensemble.git"
  },
  "keywords": [],
  "author": "Franck Paul and contributors",
  "license": "GPL-2.0",
  "bugs": {
    "url": "https://github.com/franck-paul/ensemble/issues"
  },
  "homepage": "https://github.com/franck-paul/ensemble#readme",
  "preferGlobal": true,
  "dependencies": {
    "webpack": "^5.28.0",
    "webpack-cli": "^@4.5.0",
    "mini-css-extract-plugin": "^1.4.0",
    "sass-loader": "^@11.0.1",
    "css-loader": "^@5.2.0",
    "sass": "^@1.32.5"
  },
  "installConfig": {
    "pnp": true
  }
}

Et le fichier de configuration de Webpack à ceci :

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: ['./src/scss/main.scss'],
  output: {
    filename: 'main.css',
  },
  optimization: {
    minimize: true,
  },
  module: {
    rules: [
      {
        // regular css files
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false, sourceMap: true } }],
      },
      {
        // sass / scss loader for webpack
        test: /\.(sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { url: false, sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
  devtool: 'source-map',
  mode: 'none',
};

Avec ça un yarn build produit un résultat dans le répertoire dist, ce que je cherche à faire, sauf qu’il me crée deux fichiers CSS (avec leur map respective), un nommé style.css avec l’intégralité de la CSS utilisable, je ne vais pas le reproduire ici, ça serait inutile et un second nommé main.css qui contient ça :

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	// The require scope
/******/ 	var __webpack_require__ = {};
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin

/******/ })()
;
/*# sourceMappingURL=main.css.map*/

Vu de chez moi ça ne ressemble pas trop à du CSS ça, et je n’ai aucune idée de son objet ! En fait, vu d’ici on dirait du Javascript, mais je peux me tromper, hein ?

Est-ce un fichier intermédaire ? Mais dans ce cas pourquoi générer un fichier .css.map, ou alors Webpack ne finit pas correctement son job, mais je ne saurais dire pourquoi.

Je sais par ailleurs que les deux voire trois autres outils que j’ai en vue, Gulp, Grunt et Rollup tournent aussi avec Node et je ne vais donc pas pouvoir y échapper. Par ailleurs, il semble que malgré la possibilité d’installer ces outils de manière globale, il n’est quasiment pas possible de les utiliser autrement qu’en les installant localement.

Bref, vais-je devoir me contraindre à installer tout ça localement, quitte, comme me le suggérait hier Olivier, à prévoir un Makefile qui fasse le ménage des modules Node une fois le build effectué ?

Comme le mentionnait ldbglobe dans son commentaire sur mon retour d’expérience avec Parcel, en utilisant une installation globale je prends le risque d’une incompatibilité inter-projet, ce qui est vrai dans l’absolu sauf à considérer que l’essentiel sinon la totalité des projets que je développe et/ou maintiens concerne un écosystème homogène, celui de Dotclear, ce qui justifie, à mes yeux, une installation globale — quitte d’ailleurs à installer localement pour un projet externe.

Quant à la doc de Webpack et de ses zilliards de plugin, j’avoue avoir eu du mal en ce qui concerne la mise en œuvre, en particulier quand j’ai cherché comment assurer la minification de la feuille de style avec le passage de Sass à CSS. Ou alors c’est encore un autre plugin tiers qui s’occuperait de ça et pas ceux mis en œuvre… ?

Comme pour Parcel, l’essentiel des tutos, documentations, articles, concernent un usage « non-exotique », contrairement à ce que je fais.

J’hésite un peu sur la direction à prendre :

  1. Installer localement et reprendre depuis le début, éventuellement en refaisant des tests avec Parcel puis avec Webpack.
  2. Continuer mes tests avec Gulp, Grunt et Rollup histoire d’être exhaustif.
  3. La réponse 3.

:-)

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/14926

Haut de page