Webpack 4 Configuration

A Webpack 4 starter configuration ready for production

Structure:

The Webpack 4 configuration provides:

• Dev Server with configuration options in development:
  • see the webpack.dev.js file
  • open the browser after server had been started
  • configurable delay (1200ms) before rebuilding once the first file changed
  • watch for changes in any of the webpack resolved files
  • watch ignored directory with regex ex: node_modules
  • full-screen overlay with errors or warnings
• SCSS source maps in development
• Linter in development:
  • ESLint
  • 
  • settings:
    • check syntax
    • find problems
    • enforce code style
  • see the .eslintrc.js config file
  • more about the configuration
  • ignoring files:
    • see the .eslintignore file

• contentHash in bundle files names for cache busting in production
• export images in production
• export SCSS into own CSS file in production
• minified CSS in production
• Babel.js ES6 to ES5 transpillation with configuration options in production:
  • see the provided .babelrc file
• minified JS in production
• minified HTML in production
• CSS autoprefixer in production
  • Note: CSS3 Grid Layout polyfill (IE 10-11) is available
• netlify deployment helpers for production:
  • ./netlify/_redirects file:
    • more about the _redirects file
  • netlify NPM build script "build:netlify" to copy/past the _redirects file at build time to the ./dist directory

• export favicon.png both in development and production
• export SEO files both in development and production:
  • robots.txt
  • humans.txt
    • more about the humans.txt file

Usage:

Clone or download this repository

$ git clone https://github.com/Drozerah/webpack-4-configuration.git

Then

$ cd webpack-4-configuration

Then

$ npm install

Development mode

$ npm start

• Will run the webpack-dev-server then opening the application into the browser

package.json scripts:

...
{

    "scripts": {

        "start": "webpack-dev-server --config webpack.dev.js --open",

    }

}
...

Production mode

$ npm run build

• Will create a ./dist directory with all your assets images, index.html, main.css and main.js bundles
  • Note: the clean-webpack-plugin will clean the ./dist directory before each execution of the build command

package.json scripts:

...
{
    "scripts": {

        "build": "webpack --config webpack.prod.js"

    }
}
...

Tip

To open the built app into the browser:

$ cd dist && start index.html

More about the start command line

Working with a 3rd party library

If you need to import a 3rd party library it's easy. What you have to do is to add a vendor.js file (whatever the name) into the ./src folder:

$ touch src/vendor.js

Then you have to declare this file into the webpack.common.js file as an additional entry point like so:

webpack.common.js

module.exports = {
  entry: {
    main: './src/index.js',
+   vendor: './src/vendor.js' // 3rd party library import
  },
  //...
}

Now you can import your library:

vendor.js

/**
* Import your 3rd party library thereafter like so:
* import "materialize-css" or import "bootstrap"...
*/
import "myLibrary"

Make sure your library is npm installed before you try to import it!

Run your application and Webpack will now output 2 bundles.

More about Webpack Entry Points

Deployment

This application is deployed using netlify, check it out bellow !

https://webpack-4-configuration.netlify.com/

Built with:

• Node.js
• NPM
• JavaScript ES6
• Webpack 4
• ESLint
• HTML5
• CSS3
  • Grid Layout
• SCSS
• VScode

Author:

• Thomas G. aka Drozerah - Github

Acknowledgments:

• Netlify

License:

ISC