Webpack config

admin.js

import '../scss/admin.scss';

app.js

import '../scss/app.scss';

import './calendar.js';
import './company.js';
import './contact.js';
import './events.js';
import './form.js';
import './infinite-scroll-and-sticky.js';
import './jobs.js';
import './modal.js';
import './navbar.js';
import './ripple.js';
import './theme.js';
import './typeahead.js';
import './uploader.js';

app.scss

$icon-font-path: '../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

package.json

  "devDependencies": {
    "autoprefixer": "^6.7.5",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.13.2",
    "bootstrap-sass": "^3.3.7",
    "browser-sync": "^2.13.0",
    "browser-sync-webpack-plugin": "^1.1.4",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.2",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.1",
    "node-sass": "^4.5.0",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "postcss-loader": "^1.3.2",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.13.2",
    "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony",
    "uglifyjs-webpack-plugin": "^0.2.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1"
  }

vendor.js

import 'bootstrap-sass';

webpack.config.js

const path                    = require('path');
const webpack                 = require('webpack');
const ExtractTextPlugin       = require("extract-text-webpack-plugin");
const UglifyJSPlugin          = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin       = require('browser-sync-webpack-plugin');

const config = {
	entry: {
		app: './assets/src/js/app.js',
		vendor: './assets/src/js/vendor.js',
		admin: './assets/src/js/admin.js',
	},
	output: {
		filename: '/js/[name].js',
		path: path.resolve(__dirname, 'public'),
	},
	module: {
		rules: [
			{
				test: /\.scss$/,
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
				  	use: ['css-loader', 'postcss-loader', 'sass-loader']
				}),
			},
			{
				test: /\.(woff2?|ttf|eot|svg)$/,
				use: ['url-loader']
			},
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				loader: 'babel-loader',
				query: {
					presets: ['es2015']
				}
			}
		]
	},
	plugins: [
		new ExtractTextPlugin('/css/[name].css'),
		new BrowserSyncPlugin({
		    proxy: 'localhost:8888',
		    port: 3000,
		    files: [
		        '**/*.php'
		    ],
		    ghostMode: {
		        clicks: false,
		        location: false,
		        forms: false,
		        scroll: false
		    },
		    injectChanges: true,
		    logFileChanges: true,
		    logLevel: 'debug',
		    logPrefix: 'wepback-patterns',
		    notify: true,
		    reloadDelay: 0
		})
	]
};

//If true JS and CSS files will be minified
if (process.env.NODE_ENV === 'production') {
	config.plugins.push(
		new UglifyJSPlugin(),
		new OptimizeCssAssetsPlugin()
	);
}

module.exports = config;