webpack.config.js

index.js

import '../scss/index.scss';

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin          = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin       = require('browser-sync-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');


const VENDOR_LIBS = ['bootstrap'];
const BUNDLE_LIBS = ['./src/js/index.js'];


const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});


const config = {

    entry: {
        bundle: BUNDLE_LIBS,
        vendor: VENDOR_LIBS
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use:[
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 40000,
                            name: 'images/[hash]-[name].[ext]'
                        }
                    },
                    {
                        loader : 'image-webpack-loader',
                        options: { bypassOnDebug: true }
                    }
                ]
            },
            {

                 test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
                 use: [{
                   loader: 'file-loader',
                   options: {
                     name: 'fonts/[name].[ext]',
                     outputPath: '/',
                     publicPath: 'fonts'
                   }
                 }]

            },
            {
                test: /\.scss$/,
                use: extractSass.extract({

				  	use: ['css-loader', 'postcss-loader', 'sass-loader'],

                    // use style-loader in development
                    fallback: "style-loader"
                })
            },
            {
                test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
                // loader: "url?limit=10000"
                use: "url-loader"
            },
            {
                test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
                use: 'file-loader'
            }

        ]
    },
    plugins: [
        new WebpackNotifierPlugin({
            title: 'Neoscapes'
        }),
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          Tether: 'tether',
          Popper: ['popper.js', 'default']
        }),
        new BrowserSyncPlugin({
		    proxy: 'http://localhost:8888/',
		    port: 3000,
		    files: [
		        '**/*.php'
		    ],
		    ghostMode: {
		        clicks: false,
		        location: false,
		        forms: false,
		        scroll: false
		    },
		    injectChanges: true,
		    logFileChanges: true,
		    logLevel: 'debug',
		    logPrefix: 'wepback',
		    notify: true,
		    reloadDelay: 0
		}),
        new webpack.optimize.CommonsChunkPlugin({
            names: 'vendor'
        }),
        new CopyWebpackPlugin([
            { from: 'src/images', to: 'images' }
        ]),
        new ExtractTextPlugin('styles.css')
    ]

};


//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;