One of the projects that I’m working on is quite reliant on jQuery and Bootstrap. As we’re introducing new features (such as a few React-based components, and Stylus for CSS) in said project, we’ve also introduced Webpack into it. Now, we don’t want to run jQuery nor Bootstrap through Babel (using Webpack), but we want […]
Tag Archives: webpack
Ship legacy JavaScript and CSS files in a Webpack Project with
How to deploy your first site onto Netlify (+ basic configuration)
About two months ago I developed the website for vBridge, a new company I’m participating in. As the website consists of only one static placeholder-like page, I decided to look into hosting the page directly onto a CDN. Having heard a lot of good things about Netlify, I decided to check that out. The site […]
pika/web – A Future Without Webpack
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 […]
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 […]