Skip to content

Latest commit

 

History

History
36 lines (24 loc) · 1.72 KB

README.md

File metadata and controls

36 lines (24 loc) · 1.72 KB

WEBPACK 4 Basic Frontend configuration

Basic Frontend starter kit with HTML, Sass/CSS, jQuery, Bootstrap DevServer and BrowserSync. Using dev mode sync on multiple device, vendor split for external libraries and custom bootstrap components imports.


Separation of Webpack config environments

"start" = dev mode with hot reloading and Browsery-Sync
"build:dev" = buildpack without minifing
"build:prod" = final prod buildpack


Using Browsery-Sync

This is useful to sync the dev mode with other browsers or device if the Wi-Fi is the same for all device. Type the ip address shown in the terminal after running the dev mode.
Example: External: http://192.168.1.34:8100
In the config of this plugins you can set the port and the files under watch for live reloading (html, pug...).


Custom Bootstrap components imports

You can import a single Bootstrap component in js file when needed: import "bootstrap/js/dist/carousel"; In this way there is no need to include the whole Bootstrap js and have a lighter vendor.js.
In _bootstrap.scss you can import only the style components you need. This files are scss framgents imported directly from the node modules folder. This can be useful when are needed only some features from Bootstrap (example the layout/grid classes) without needing th include all the css rules.


ESLINT

To disable line : // eslint-disable-line
To disable the entire file console : // eslint-disable no-console
To disable a single line : // eslint-disable-line no-console


ISSUES

Webpack 4 causes issues with Extract Text Plugin. Use instead mini-css-extract-plugin