webpack config example

package.json

{
  "main": "app/index.html",
  "scripts": {
    "webpack": "node_modules/.bin/webpack",
    "webpack-dev-server": "node_modules/.bin/webpack-dev-server",
    "clean": "rm -rf ./app/",
    "bundle": "env NODE_ENV=development webpack --progress --colors",
    "bundleprod": "env NODE_ENV=production webpack --progress --colors",
    "devserver": "npm run clean && env NODE_ENV=development webpack-dev-server --progress --colors --inline --open --host localhost --port 8000 --watch",
    "rebuild": "npm run clean && npm run bundle",
    "rebuildprod": "npm run clean && npm run bundleprod",
    "postinstall": "npm run rebuildprod"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.16.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "css-loader": "^0.25.0",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "node-sass": "^3.10.0",
    "pug": "^2.0.0-beta6",
    "pug-loader": "^2.3.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  },
  "dependencies": {
    "animate.css": "^3.5.2",
    "jquery-nice-select": "^1.1.0",
    "node.normalize.scss": "^3.0.3",
    "slick-carousel": "^1.6.0"
  }
}

webpack.config.js

"use strict";
/*jshint esversion: 6 */
/*jshint node: true */
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require("path");

const BASE_DIR = __dirname;
const pages = ["index", "about"];

const extractCss = new ExtractTextPlugin("[name]-build.css", {
	allChunks: true
});

module.exports = {
	devtool: "source-map",

	entry: {
		"app": path.resolve(BASE_DIR, "scripts", "main.js"),
		"vendor": [
			"jquery",
			"jquery-nice-select",
			"slick-carousel"
		]
	},

	resolve: {
		alias: {
			"js": path.resolve(BASE_DIR, "scripts"),
			"tpl": path.resolve(BASE_DIR, "templates"),
			"styles": path.resolve(BASE_DIR, "styles"),
			"img": path.resolve(BASE_DIR, "assets", "img")
		},
		extensions: ["", ".js", ".sass", ".pug"]
	},

	output: {
		publicPath: "/",
		path: path.join(BASE_DIR, "app"),
		filename: "[name]-build.js"
	},

	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: "babel",
				query: {
					presets: ["es2015"]
				}
			},
			{
				test: /\.sass$/,
				loader: extractCss.extract(["css", "autoprefixer?browsers=last 2 versions", "resolve-url", "sass?sourceMap"])
			},
			{
				test: /\.pug$/,
				loader: "pug?pretty",
			},
			{
				test: require.resolve('jquery'),
				loaders: ["expose?$", "expose?jQuery"]
			},
			{
				test: /\.(png|woff|woff2|eot|ttf|svg|jpe?g)$/,
				loader: 'file?name=[path][name]-[hash:7].[ext]',
			}
		]
	},

	devServer: {
		contentBase: path.resolve(BASE_DIR, "app")
	},

	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
			names: ["app", "vendor"],
			minChunks: Infinity
		}),

		extractCss
	].concat(
		(process.env.NODE_ENV === "production")?
		new webpack.optimize.UglifyJsPlugin({
			compress: {
				warnings: false,
				drop_console: false,
				unsafe: true
			}
		}): []
	).concat(
		pages.map(page =>
			new HtmlWebpackPlugin({
				filename: `${page}.html`,
				template: path.resolve(BASE_DIR, "templates", `${page}.pug`)
			})
		)
	)
};