Interesting take on bundlers: Over the last several years, JavaScript bundling has morphed from a production-only optimization into a required build step for most web applications. Whether you love this or hate it, it’s hard to deny that bundlers have added a ton of new complexity to web development – a field of development that […]
Tag Archives: webpack
Easier imports with Webpack’s resolve.alias
One of the things I find annoying when using import in my JS code is the fact that you need to refer to other local files using (relative) paths. Like so: // Without resolve.alias 😭 import Modal from ‘../../../components/objects/modal/modal’; Coming from a PHP background – where you have include paths and autoloaders – I essentially […]
Electron Webpack Dashboard
Ken Wheeler, who also created the aforementioned webpack-dashboard, has now created an Electron based version: The original webpack-dashboard, was fun and people seemed to like it. Unless they were on Windows, or used a weird terminal set up, or if they just wanted more. The original dashboard felt like working at NASA. 50 years ago. […]
Webpack Academy
Sean Larkin, one of the maintainers of Webpack, has started a video series to working with Webpack. The first course, entitled “The Core Concepts” is available for free: One of the biggest mysteries about webpack is how it works. As one of the maintainers of webpack, Sean Larkin is going to take you down a […]
Webpack Module Tree Visualizer
Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates. Generate JSON stats, and pass it into the online tool. webpack –json > stats.json You can also use the plugin locally if you want. Webpack Visualizer → Related: Disc – Browserify Module Tree Visualizer →
webpack-dashboard – A CLI dashboard for your webpack dev server
webpack-dashboard is a webpack plugin that changes the noisy CLI output from this … … into that: Now when you run your dev server, you basically work at NASA Awesome stuff! Installation possible via npm: npm install webpack-dashboard –save-dev webpack-dashboard – A CLI dashboard for your webpack dev server →
Introduction to Webpack
There’s a presentation embedded in this post: Introduction to Webpack – Ordina JWorks – CC JS & Web Slides by Jan De Wilde: This presentation will guide you step by step so you can start using Webpack in your own projects.
Setting up React for ES6 ES2015 with Webpack and Babel
This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel. Installing all the required dependencies: # Install Webpack npm install –save-dev webpack # Install the Babel Loader, for use with Webpack npm install –save-dev babel-loader # Install the es2015 and react presets, for use with Babel npm […]
Webpack — The Confusing Parts
When I first saw a Webpack config file, it looked very alien-y 👽 and confusing 😱. After playing around with it for some time, I now think that it is because Webpack just has a unique syntax and new philosophies that may cause confusion in the beginning. Incidentally, these philosophies are also responsible for making […]