Drupal 8 theme development with Webpack, SASS, ES6 and BrowserSync serving

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-async-to-generator"]
}

.eslintrc

{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 8
  },
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "rules": {
    "object-curly-spacing": [2, "always"],
    "quotes": [
      2,
      "single",
      {
        "allowTemplateLiterals": true
      }
    ]
  }
}

package.json

{
  "name": "",
  "version": "",
  "description": "",
  "author": "",
  "license": "ISC",
  "main": "resources/scripts/main.js",
  "scripts": {
    "build": "NODE_ENV=production webpack -p",
    "start": "NODE_ENV=development webpack --progress --colors --watch"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.4",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^1.2.0",
    "css-mqpacker": "^6.0.1",
    "postcss-pxtorem": "^4.0.1",
    "webpack": "^3.5.6",
    "webpack-blocks": "^1.0.0-beta.4"
  },
  "dependencies": {}
}

postcss.config.js

const autoprefixer = require('autoprefixer');
const postcssPxtorem = require('postcss-pxtorem');
const cssMqpacker = require('css-mqpacker');

module.exports = {
  plugins: [
    autoprefixer({
      grid: true,
      browsers: ['last 2 versions', 'ie >= 10', 'Safari >= 10']
    }),
    postcssPxtorem({
      propList: ['*', '!border*'],
      mediaQuery: true
    }),
    cssMqpacker()
  ]
};

webpack.config.js

const {
  createConfig,
  match,
  resolve,

  // Shorthand setters
  addPlugins,
  defineConstants,
  entryPoint,
  env,
  setOutput,
  sourceMaps
} = require('@webpack-blocks/webpack');
const webpack = require('webpack');
const devServer = require('@webpack-blocks/dev-server');
const { file, url } = require('@webpack-blocks/assets');
const babel = require('@webpack-blocks/babel6');
const sass = require('@webpack-blocks/sass');
const postcss = require('@webpack-blocks/postcss');
const extractText = require('@webpack-blocks/extract-text');
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = createConfig([
  defineConstants({ 'process.env.NODE_ENV': process.env.NODE_ENV || 'development' }),
  entryPoint({
    main: './resources/scripts/main.js',
    // CKEditor Styles
    editor: './resources/styles/editor.scss'
  }),
  setOutput({
    path: path.resolve('./build'),
    filename: 'scripts/[name].js'
  }),
  // use Drupal's jQuery
  setExternals('jQuery'),
  babel(),
  match(['*.gif', '*.jpg', '*.jpeg', '*.png', '*.svg', '*.webp'], [file()]),
  addPlugins([
    new webpack.ProvidePlugin({
      $: 'jQuery',
      jquery: 'jQuery'
    })
  ]),
  env('production', [
    stylesBlock()
  ]),
  env('development', [
    sourceMaps(),
    stylesBlock(true),
    addPlugins([
      new BrowserSyncPlugin(
        {
          notify: false,
          port: 8080,
          proxy: 'testingurl.dev',
          files: [
            '*.theme',
            'components/**/*.twig',
            'templates/**/*.twig'
          ]
        }
      )
    ])
  ])
]);

function stylesBlock(dev = false) {
  const sassConfig = {
    outputStyle: 'expanded',
    precision: 4,
    includePaths: ['node_modules']
  };

  if (dev) {
    sassConfig.sourceMap = true;
    sassConfig.sourceMapEmbed = true;
  }

  return match('*.scss', { exclude: path.resolve('node_modules') }, [
    postcss(),
    sass(sassConfig),
    extractText('styles/[name].css')
  ]);
}

function setExternals(externals) {
  return function (context, { merge }) {
    return merge({ externals });
  };
}