thecodeholic/webpack-starter-kit

Webpack 4 starter kit project. Features: Bootstrap 4, ES6, SASS, Image optimization, HMR

Webpack Starter Kit project

If you want to create a project using ES6 full features (including module export/import), with SCSS and Bootstrap 4, with image optimization, this project maybe the best solution for you.

The project has the following features:

• Compilation of ES6 into ES5
• Converting SASS into CSS
• Bootstrap 4
• Image loading and optimization
• Webpack dev server
• HMR for hot reloading and faster development

The project is production ready.

Installation

1. Clone the project
2. Go to the project root directory
3. Run npm install

Running on development using dev server

Run npm run start to start to webpack dev server with HMR ready

For production

Run npm run build to build project's all assets in dist folder.

---

The project's initial version was created while recording this youtube video

webpack-starter-kit's Issues

nested folder on images are not processed.

on the src folder nesting folders or inline images using css i think are not processed:
-images
--gallery
--post-images

are not processed on build.

output:

images/8.jpg   5.8 KiB          [emitted]
   images/9.jpg  8.63 KiB          [emitted]

images/bg-nose.jpg 5.65 KiB [emitted]
images/headerbg.jpg 65 KiB [emitted]
images/logo.png 18.3 KiB [emitted]
index.html 7.51 KiB [emitted]
main.css 12.2 KiB 0 [emitted] main
main.js 117 KiB 0 [emitted] main
Entrypoint main = main.css main.js
[6] multi ./src/app.js 28 bytes {0} [built]
[7] ./src/app.js 1.01 KiB {0} [built]
[8] ./src/scss/style.scss 39 bytes {0} [built]
+ 11 hidden modules
[11] ./src/images/gallery/10.jpg 59 bytes {0} [built]
[12] ./src/images/gallery/4.jpg 58 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/lib/loader.js!src/scss/style.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/style.scss 22.5 KiB {0} [built]
[3] ./src/images/headerbg.jpg 65 bytes {0} [built]
[4] ./src/images/bg-nose.jpg 64 bytes {0} [built]
+ 2 hidden modules

Prevent flickering

Hello and thanks for the starter kit. Not sure if it happens to you too, but I noted a small issue modifying index.html markup consisting in page flickering in the browser during the refresh. No issue modifying scss files.

This is the small tweak I did to prevent it. hth

     plugins: [
       new HtmlWebpackPlugin({
+        inject: 'head',
         title: 'Webpack starter project',
         template: path.resolve('./src/index.html')
       }),

Add fonts loading