1
As should be common knowledge amongst my regular readers, I spend a lot of my professional time acting as a web developer. Naturally, this means I have to stay apprised of updates and new tools. One of these updates that I’ve been neglecting is updating my webpack from 1.4 to 2.3.2. As such, this month I will cover how I updated to webpack 2.3.2, while still allowing older projects to work with older versions. The Basics The way I set up almost any project I work on these days is using webpack, npm, and then whatever tools are needed for that particular project (SASS, Stylus, etc.). Every project typically includes postcss at some point, as the only section of the chain I would need to replace are then preprocessors. Problems For a long while, I would just npm install -g webpack, so I could run it from my path. Naturally, that meant I had to use the same version for every project, and if I’m planning on updating projects one by one, I couldn’t just jump versions globally. Instead, I removed the globally installed webpack file, and am instead adding webpack to each project’s package.json file.
Comme doivent le savoir mes lecteurs assidus, je passe une grande partie de mon temps professionnel comme développeur Web. Naturellement, cela signifie que je dois rester au fait des mises à jour et des nouveaux outils. Une de ces mises à jour que j'ai négligée a été celle de mon webpack de la 1.4 vers la 2.3.2. Ainsi, ce mois-ci, je vais vous parler de comment j'ai fait la mise à jour vers la version 2.3.2 de webpack, tout en permettant aux anciens projets de continuer à marcher avec les vieilles versions.
Les Bases
La méthode que j'utilise actuellement pour presque tous les projets est d'utiliser webpack, npm, puis les outils nécessaires pour ce projet en particulier (SASS, Stylus, etc.). Chaque projet inclut un postcss à un moment donné, de telle façon que la seule partie de la chaîne que je dois remplacer est celle des préprocesseurs.
Problèmes
Pendant longtemps, je faisais un npm install -g webpack, pour pouvoir le lancer à partir de mon chemin. Naturellement, cela signifiait que je devais utiliser la même version pour l'ensemble des projets, et si je prévoyais de mettre à jour les projets un par un, je ne pouvais pas sauter des versions directement. Au lieu de cela, j'ai retiré l'installation globale du webpack, et j'ai ajouté un webpack dans le fichier package.json de chaque projet.
Running webpack Since webpack is now relegated to the project’s path (as opposed to my actual $PATH variable), running webpack on its own doesn’t work. Instead, I created a script in my package.json called start, that simply runs webpack once. For some projects, I may also create a script called watch, that runs webpack –watch instead. Example (I typically add this, shown bottom left, after main): Some predefined script names (such as start) can be run by simply using npm start. In the case of a custom name (like watch) it needs to be run like this: npm run watch. Webpack config My full config can be found here: https://pastebin.com/1zv4DJw1 Keep in mind that webpack 2 has changed the format, and so the file above won’t work for older versions.
Lancer webpack
Puisque webpack est maintenant relégué dans les répertoires du projet (et non plus dans ma variable $PATH), lancer le webpack tout seul ne marche pas. J'ai alors créé un script dans mon package.json, appelé 'start', qui lance simplement le webpack une fois. Pour certains projets, je dois aussi créer un script appelé 'watch', qui lance webpack –watch.
Exemple (j'ajoute cela, montré en bas à gauche, après le “main”) :
Des scripts prédéfinis (comme “start”) peuvent être lancés simplement avec npm start. Dans le cas où le nom est personnalisé (comme “watch”) vous devez le lancer par npm run watch.
Configuration de Webpack
Vous trouverez ma configuration complète ici: https://pastebin.com/1zv4DJw1
Attention webpack 2 a changé de format, donc les fichiers ci-dessus ne marcheront pas pour des versions antérieures.
2
Explanation The var lines at the top of the file are defining a few tools that webpack will be using. Then follows the new module.exports definition, where the main file is defined, as well as the output files. The rules that follow first run .css files through postcss (for things like FontAwesome), then .styl files using stylus, postcss, and then the css loader. The last two entries are for ensuring that font files are correctly loaded and available. The very last bit of the file simply extracts the CSS text from the output js file, and saves it into a .css file. But wait! The keen-eyed among you probably realized that I’ve not yet talked about my postcss configuration, nor my entry JS file. As both of these elements are separate files, I’m covering them separately.
Explication
Les lignes var en haut du fichier définissent quelques outils que webpack utilisera. Puis suit la définition du nouveau module.exports, où le fichier principal est défini, tout comme les fichiers de sortie. Les règles qui suivent lancent d'abord les fichiers .css jusqu'à postcss (pour des trucs comme FontAwesome), puis les fichiers .styl pour stylus, postcss, et enfin le chargeur de css. Les deux dernières lignes sont là pour assurer que les fichiers de police sont correctement chargés et disponibles.
La toute dernière partie du fichier extrait simplement le texte CSS du fichier js de sortie, et sauve le tout dans un fichier .css.
Mais attendez !
Les plus observateurs d'entre vous ont probablement vu que je n'avais pas encore parlé de ma configuration postcss, ni de mon fichier JS d'entrée. Comme ce sont tous les deux des fichiers séparés, j'en parlerai séparément.
Extra files Newer versions of postcss and postcss-loader support having an external file called postcss.config.js with the modules postcss should use. It’s a very simple file in my case, as I just use rucksack (for easy media queries such as +above(1200px)), and autoprefixer (so I don’t have to worry about prefixing all my CSS manually). The file looks like this: The entry file for the entire process is pretty simple (as for most projects, I just use it to load the correct CSS files). It can naturally be more complicated if you’re writing JS. I therefore call the file styles.js. The contents are typically something like that shown at the bottom of this page. require('./reset.css'); require('./font-awesome.css'); require('./styles.styl'); Naturally, I could just import the files from within a single stylus or css file, and have one entry in styles.js. However, this can get confusing if you’re importing files that are importing files, and it can be hard to keep track of which imports you added, and which were present from the beginning. That’s why I load all complete stylesheets in the JS file. In the case of mixins (such as variables or functions), I’ll load those only in the files where they are needed, as they won’t otherwise compile. I hope this article was useful for anyone who wants to use NPM and upgrade to webpack 2. If you have any questions or comments, feel free to send me an email at lswest34+fcm@gmail.com.
Fichiers supplémentaires
Les nouvelles versions de postcss et postcss-loader permettent d'avoir un fichier externe postcss.config.js contenant les modules que postcss doit utiliser. C'est un fichier très simple dans mon cas, car j'utilise seulement rucksack (pour des demandes de médias faciles comme +above(1200px)), et autoprefixer (pour ne pas avoir à préfixer tous mes CSS à la main). Le fichier ressemble à ça :
Le fichier en entrée de l'ensemble du processus est assez simple (car pour la plupart des projets, je l'utilise seulement pour charger les bons fichiers CSS). Il peut bien sûr devenir plus compliqué si vous écrivez du JS. Ainsi j'appelle le styles.js. Le contenu est en général quelque chose qui ressemble à ce qui est en bas de cette page.
require('./reset.css'); require('./font-awesome.css'); require('./styles.styl');
Bien sûr, je pourrais simplement importer les fichiers d'un seul fichier stylus ou css, et avoir une seule ligne dans styles.js. Mais cela peut prêter à confusion si vous importez des fichiers, et ça peut être difficile de garder la trace des imports que vous avez ajoutés, et qui étaient présents dès le début. C'est pourquoi je charge toutes les feuilles de styles complètes dans le fichier JS. Dans le cas de mélanges (comme les variables ou les fonctions), je le charge uniquement dans les fichiers où on en a besoin, sinon ça ne compilera pas.
J'espère que cet article a été utile à ceux qui veulent utiliser NPM et aller vers webpack 2. Si vous avez des questions ou des remarques, n'hésitez pas à m'envoyer un e-mail à lswest34+fcm@gmail.com.