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

Drozerah/webpack-4-configuration

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages