Mikael Vesavuori, 2018
Webpack 4 came out on February 24 2018 and this boilerplate initially came out the day after. Because it's still VERY early days, expect that many of your favourite plugins won't work just yet. This boilerplate should be stable for what I've made assembled. It uses a couple of alpha versions and some other odd versions to solve errors. I will likely update this as Webpack 4 support becomes more solid, also opting for more stable dependency versions.
You need some very basic tooling for a current-generation web development project. Right now, with Webpack 4 being super-hot and brand spanking new, you want to try it out without having to figure out every last bit of what works and not. You may, or may not, be sure if you need all the bells and whistles but you'd much rather have a setup that is easily extensible and does the basics (build a distribution package, bundle JS, transpile ES2015 into ES5) than starting from zero.
The build operation will compile/transpile and place fresh files in the dist folder. The dev command will run Webpack in development mode while watching your files. Webpack will use index.js as the entry point and import/require index.html and styles.scss. You can also use webpack-dev-server to run the site locally with auto-reloading.
- Webpack 4 which does bundling of JS, but also works as a simple build tool
- Webpack Dev Server which sets up a local server
- PostCSS (with PreCSS and cssnext) so you can run super-sweet CSS whether you feel the traditional preprocessor love or you'd rather want futuristic not-yet-seen wizardry
- Babel which allows transpilation of new ES2015+ code to ES5 (this boilerplate is set to output ES6 code)
npm run buildoryarn buildwill build your project and put it in the dist foldernpm run devoryarn devwill use the new development mode with watchingnpm run serveroryarn serverwill use Webpack's dev server to run your site, auto-updating and all such things