loadEnv.js

const dotenv = require('dotenv')
const path   = require('path')
const fs     = require('fs')

/**
 * Get keys that are present in arrA but not in arrB
 * @param  {array} arrA
 * @param  {array} arrB
 * @return {array}
 */
function difference(arrA, arrB) {
  return arrA.filter((a) => arrB.indexOf(a) < 0)
}

/**
 * Removes properties with empty values
 * @param  {object} obj
 * @return {object}
 */
function compact(obj) {
  const result = {}
  Object.keys(obj).forEach((key) => {
    if (obj[key])
      result[key] = obj[key]
  })
  return result
}

try {
  fs.accessSync(path.resolve(__dirname, '.env'), fs.R_OK)
  fs.accessSync(path.resolve(__dirname, '.env.example'), fs.R_OK)
} catch (e) {
  throw new Error('Both .env and .env.example files must be present in your project working directory')
}

const vars = dotenv.parse(fs.readFileSync('.env'))
const exampleVars = dotenv.parse(fs.readFileSync('.env.example'))
const missing = difference(Object.keys(exampleVars), Object.keys(compact(vars)))

if (missing.length > 0)
  throw new Error('Missing environment variables: ' + missing.join(', '))

module.exports = (additionalVars) => {
  if (additionalVars !== Object(additionalVars))
    additionalVars = {}

  const injectedVars = Object.assign({}, vars, additionalVars)

  return Object.keys(injectedVars).reduce((previous, current) => {
    // If value is a string DefinePlugin will use it as a code fragment so we need to hack around this behaviour
    previous[current] = JSON.stringify(injectedVars[current])
    return previous
  }, {})
}

webpack.config.js

'use strict'

const webpack = require('webpack')
const path    = require('path')

const ExtractTextPlugin     = require('extract-text-webpack-plugin')
const WebpackNotifierPlugin = require('webpack-notifier')
const BrowserSyncPlugin     = require('browser-sync-webpack-plugin')

const env = require('./loadEnv')({
  NODE_ENV: process.env.NODE_ENV || 'development',
})

module.exports = {
  entry: {
    dependencies: ['babel-polyfill', path.resolve(__dirname, 'resources/assets/dependencies')],
    main: path.resolve(__dirname, 'resources/assets/main'),
  },
  output: {
    path: path.resolve(__dirname, 'public/bundle'),
    filename: '[name].js',
    chunkFilename: '[id].js',
    publicPath: JSON.parse(env.APP_URL) + '/bundle/',
  },

  resolve: {
    alias: {},
    extensions: ['', '.js', '.jsx', '.vue'],
    modulesDirectories: ['shared', 'node_modules'],
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.js$/,
        include: path.join(__dirname, 'resources/assets'),
        exclude: /node_modules/,
        loader: 'babel',
      },
      {
        test: /\.vue$/,
        loader: 'vue',
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!resolve-url')
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!resolve-url!sass?sourceMap')
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&minetype=application/font-woff"
      },
      {
        test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader"
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?name=[path][name].[ext]&limit=10000'
      },
    ]
  },

  plugins: [
    new webpack.NoErrorsPlugin(),

    new webpack.DefinePlugin(env),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),

    new ExtractTextPlugin('[name].css'),

    new WebpackNotifierPlugin(),

    new BrowserSyncPlugin({
      // open localhost:3000 (site) or localhost:3000 (browser-sync config ui)
      //
      // When you launch browser-sync you might get "unsecure response" error.
      // In such cases you must first open the proxied page directly and accept self-signed SSL certificate
      // Then reload browser-sync proxy and the page will be loaded as expected
      proxy: JSON.parse(env.APP_URL),

      // Whether to show pop-over notifications
      notify: true,
    }),
  ],

  devtool: 'cheap-module-eval-source-map',
}