Webpack, nouveau retour d'expérience

Nouvel essai avec Webpack, cette fois en installant tout en local, comme préconisé par toute la planète.

Alors évidemment, ça fonctionne mieux même s’il reste tout de même des « scories » avec ce fichier Javascript qui est généré, même si vous n’avez aucun fichier Javascript à traiter. Mais ce n’est pas très grave.

Pour info, voilà à quoi ressemble le fichier package.json :

{
  "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",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "css-loader": "^5.2.0",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "mini-css-extract-plugin": "^1.4.0",
    "postcss-loader": "^5.2.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  }
}

Quant au fichier de configuration de Webpack, webpack.config.js, voilà son contenu :

"use strict";

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

module.exports = {
  entry: ['./src/scss/main.scss', './src/js/theme-switcher.js'],
  output: {
    filename: 'main.js',
  },
  optimization: {
    minimize: true,
    minimizer: [
      `...`,
      new CssMinimizerPlugin(),
    ],
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { url: false, sourceMap: true } },
          'postcss-loader',
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ],
  devtool: 'source-map',
  mode: 'none',
};

Maintenant ce n’est pas fini.

Il faut que je vire les fichiers générés du dépôt — un petit .gitignore qui va bien ; pas la peine de les versionner.

Par ailleurs il faut aussi que je vois s’il est possible de générer une archive, de thème pour ce qui concerne ce projet — pour un plugin seul le nom de l’archive change, le reste étant identique —, installable avec Dotclear.

Et pour terminer je vais faire l’impasse sur Parcel qui ne m’apportera rien de plus, je crois.

Ah si, j’oubliais, je n’ai pas encore très bien compris les différents « modes » de build, production vs développement… Je dois admettre que ça reste assez confus et je n’ai pas encore trouvé la documentation pour un noob comme moi !

Ajouter un commentaire

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/14930

Haut de page