Webpack Launchpad is a small, easy-to-use and well-documented Webpack boilerplate for Webpack beginners. Use it to create your next amazing project or learn how to use Webpack.
Almost every line in Webpack Launchpad will be commented so that you can learn what each line is doing. You may play around with the code however you like, or use it as is to kick start (or, uh, provide a launchpad for) your own project.
Webpack Launchpad is ready for you to download! I am currently improving documentation, but aside from that, feel free to use it! As I find cool things (standards/best practices/new features), I will introduce them to Webpack Launchpad as this is an ongoing project!
Download or clone and npm install, thats it!
The current file structure when the production of this boilerplate is built can be found below. This is configuration A (B may be coming in the future).
App
index.html
- assets
- css
style.css
- js
app.js
- media
- fonts
- images
- vectors
- Code Splitting
- Hot Module Reloading
- Source Maps (JS and CSS)
- Cache Busting
- Environment Variables
- External Dependencies
- Asset Loading (Images, Fonts, JSON [JSON is supported by Default])
- Three Shaking
- Webpack Dev Server
PRs are welcome depending on what you are adding! Here are a few helpful points:
- Please don't use ES6/ES2015 at this time unless necessary. There are a few bits on this project that uses ES6/ES2015 (since Webpack 2 and up supports it), but for the most part, keep it newbie friendly.
- Use 4 space tab :P -- no, lets not add a file to handle that.
- Keep it as light as possible! Only the essentials!
- Document your code! Get really hand-holdy with it.
- Make sure you are using the best and latest way to do whatever it is you are adding!
- Please test your code!
- Assume that your audience is learning JavaScript and Webpack.
- Be nice! :)
- Add all to-do items to Github.
- Start docs explaining code.
- Logo maybe?
- Add testing Launchpad project.
- Test this in an actual project once all the points are done!
- WebWorkers/Offline Plugin/Webpack.
- Make sure we are not shipping anything to customers that we do not want.
- Check for Deprecated notices (issue not from Extract Text Plugin, may be from a dependency of a dependency).
- Javascript HTML Template example as an alternative
- Add testing as a LG project feature.
- Add testing to the LG project.
- Add CommonChunk Plugin as option to Webpack.
Installing img-loader on some versions of OSX may raise errors with a missing libpng dependency:
Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
This can be remedied by installing the newest version of libpng with homebrew:
brew install libpng
PurifyCSS purifies all CSS that is not being used in HTML files. This, essentially, does not include JavaScript files that may include CSS Modules, JSX, etc. The PurifyCSS team has a work around but the issue is still present.
As this project assumes you will be using most of your CSS in classes and IDs you set in JavaScript, I will comment out PurifyCSS for the time being.
Current ReadMe for JSHint shows outdated configuration.
Webpack Launchpad takes the best parts from these fine folks and their tutorials:
- Webpack Guide
- NPM Guide
- Webpack Seminar
- Webpack For Beginners
- Traversy Media Webpack Crash Course
- LearnCode Academy Quick Webpack Tutorial
And follows the conventions of these fine... uh... sites/entities/folks?