Ceci est une ancienne révision du document !
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.
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.
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.
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.