Webpack 4 Configuration
This is my personal webpack v4
configuration, that I am using for small static projects.
Feel free to contribute, improve or use it for your projects.
Contains some neat stuff out of the box!
- jQuery Slim
- Bootstrap with Popper.js
- FontAwesome Pro (which you cannot install, unless you have a Pro account, as you will require a Token for installation)
What does this configuration handles?
Common for development & production environment
- it accepts two entry points; one for the
app
and one for thevendor
- it compiles everything with relative paths, rather than absolute
- it compiles
sass/scss
to thecss
file - it compiles
es6
to the syntax that every browser can understand - it contains latest Boostrap, but with entirely modular setup; you may include only the parts that you need, as you probably won't use 70% of the framework
- it has alias as
~
for importing yourjs
files, no more mess with directory back-levels
Development environment
- it runs webpack-dev-server with browser-sync support
- it builds source-maps
Production environment
- it minifies
js
- it minifies multiple image types (gif, png, jpg, jpeg, svg)
- it copies all
web fonts
- it minifies all
json
files fromdata
directory - it has subresource-integrity
- it does not build source-maps, but you may specify it on line
218
if you want them
Commands?
It's pretty easy... You do not have a bunch of commands, just two of them:
npm run dev
โ to start with developmentnpm run build
- to make it ready for production use