Introduction

The starting webpack config. It's a function that accepts an ​env​ environment parameter (build, or prod).

  // **** webpack.config.js   ****

const {resolve} = require('path')
module.exports = env => {
    return {
        entry: './js/app.js',
        output: {
            filename: 'bundle.js',
            path: resolve(__dirname, 'dist'),
            pathinfo: !env.prod
        },
        context: resolve(__dirname, 'src'),
        devtool: env.prod ? 'source-map' : 'eval',
        bail: env.prod,
        module: {
            loaders: [
                {test: /\.js$/, loader: 'babel!eslint', exlcude: /node_modules/},
                {test: /\.css$/, loader: 'style!css'}
            ]
        }
    }
}

The corresponding entries in package.json:

  // **** package.json ****
"scripts": {
    ..
    "build": "webpack --env.dev"
    "build:prod": "webpack --env.prod -p"
    
    ..
    // the start scripts:
    "start": "webpack-dev-server --env.dev --content-base dist"
    
    // and some prestart scripts (cleans)
    "clean-dist": "rimraf dist",
    "copy-files": "cpy src/index.html scr/favicon.ico dist",
    // just runs the above scripts
    "clean-and-copy": "npm run clean-dist && npm run copy-files",
    // and finally the prestart script
    "prestart": "npm run clean-and-copy",
    ..
}

Webpack validator

  // **** package.json ****
..
"scripts": {
  "test": "karma start",
  "watch:test": "karma start --auto-watch --no-single-run",
  ..
  // 1. ++++ for the development
  "validate-webpack:dev": "webpack-validator webpack.config.js --env.dev"
  
}

Now, you can run ​$ npm validate-webpack:dev​ and it tells you clearly the errors (“modules not allowed”).Then we need to add these validations to our pre-commit hook in package.json:

  // **** package.json ****
..
"scripts": {
  "test": "karma start",
  "watch:test": "karma start --auto-watch --no-single-run",
  ..
  // 1. ++++ add validate-webpack:* to run all the validations
  "validate": "nm-run-all --parallel validate-webpack:* lint test"
  "validate-webpack:dev": "webpack-validator webpack.config.js --env.dev"
  
}

Now, we can just run ​$ npm run validate​ But now we get the errors twice, for each validator. 

  // **** webpack.config.js ****
..
const validate = require('webpack-validator');


module.exports = env => {
  // wrap the whole statement here with validate
  return validate ({
    ...
  })
}