Webpack + Babel + PostCSS + Pug + ESLint Boilerplate

webpackBoilerplate.js

const path = require('path')
const postcssPresetEnv = require('postcss-preset-env')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cssnano = require('cssnano')
const postcssImport = require('postcss-import')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/views/index.pug'),
      filename: 'index.html',
      minify: true,
      hash: true,
      inject: true
    })
  ],
  module: {
    rules: [
      {
        test: /\.pug$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        use: 'pug-loader'
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        include: /src/,
        exclude: /node_modules/,
        use: 'file-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                postcssImport,
                postcssPresetEnv({
                  stage: 0,
                  browsers: 'last 4 versions'
                }),
                cssnano
              ]
            }
          },
        ]
      },
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          emitError: true
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: /src/,
        loader: "babel-loader"
      }
    ]
  }
}