Webpack Config

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const EntryList = require('./weback.entrylist');

const IS_PROD = (process.env.NODE_ENV === 'prod') ? true : false;

/* output path */
const OUT_DIR_ABS = path.resolve('./dist');

const CSS_FILENAME_OUTPUT_PATTERN = `./[name].min.css`;
const extractSass = new ExtractTextPlugin(CSS_FILENAME_OUTPUT_PATTERN);

const GENERATE_SOURCE_MAPS = false;

const CSS_MINIFY = IS_PROD;

console.log(process.env.npm_package_domains_app);

console.log("Running on", process.env.NODE_ENV);

const autoprefixer = require('autoprefixer');

module.exports = [{
	name: 'js-all',
	watch: !IS_PROD,
	context: path.resolve(__dirname, 'src'),
	entry: EntryList('./src/js', '.js'),
	output: {
		path: OUT_DIR_ABS,
		filename: './js/[name].bundle.js'
	},
	node: {
		fs: 'empty'
	},
	module: {
		rules: [{
			test: /\.js$/,
			loader: 'babel-loader',
			query: {
				"presets": [
					["env", {
						"targets": {
							"ie": "9"
						}
					}]
				],
				"plugins": [
					["transform-runtime", {
						"helpers": false,
						"polyfill": false,
						"regenerator": true,
						"moduleName": "babel-runtime"
					}], "transform-object-assign", "transform-function-bind"
				]
			}
		}, {
			test: /\.tpl$/,
			include: [
				path.resolve(__dirname, 'src/views'),
			],
			use: {
				loader: 'handlebars-loader',
				options: {
					minimize: true,
					assumeObjects: true,
					knownHelpers: ['formatNumber'],
					knownHelpersOnly: false,
					helperDirs: [
						path.resolve(__dirname, 'src/js/handlebar-helpers'),
					],
					partialDirs: [
						path.resolve(__dirname, 'src/views/partials')
					],
					extensions: [
						".tpl"
					],
					handlebarsLoader: {}
				}
			}
		}, {
			test: require.resolve('jquery'),
			use: [{
				loader: 'expose-loader',
				options: 'jQuery'
			}]
		}, {
			test: /\.modernizrrc$/,
			loader: "modernizr-loader!json-loader"
		}]
	},
	resolve: {
		alias: {
			'handlebars.runtime': 'handlebars/dist/handlebars.runtime.min',
			'plupload_exif': './../../../libs/plupload/exif',
			'docCookies': './../../../libs/cookies.js/cookies_min',
			'percircle': 'percircle/dist/js/percircle',
			'slick-carousel': 'slick-carousel/slick/slick.min',
			modernizr$: path.resolve(__dirname, "./.modernizrrc")
			//__lib__: '__folder_path__/__filename__.min'
		}
	},
	plugins: [
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery',
			percircle: 'percircle',
			mdc: 'material-components-web',
			slick: 'slick-carousel',
			Handlebars: 'handlebars.runtime',
			HandlebarsIntl: 'handlebars-intl',
			plupload_exif: 'plupload_exif',
			docCookies: 'docCookies'
		}),
		new webpack.optimize.CommonsChunkPlugin({
			name: "vendor",
			minChunks: (module) => module.context && module.context.indexOf("node_modules") !== -1
		}),
		new webpack.DefinePlugin({
			VERSION: JSON.stringify(process.env.npm_package_version),
			DOMAIN: JSON.stringify(process.env.npm_package_domains_app),
			API_DOMAIN: JSON.stringify(process.env.npm_package_domains_api),
			AUTH_DOMAIN: JSON.stringify(process.env.npm_package_domains_auth)
		})
	]
}, {
	name: 'css-all',
	context: path.resolve(__dirname, 'src'),
	entry: EntryList('./src/scss', '.scss'),
	output: {
		path: OUT_DIR_ABS,
		filename: './[name].min.css'
	},
	module: {
		rules: [{
				test: /\.(scss|sass|css)$/i,
				use: ExtractTextPlugin.extract({
					use: [{
						loader: "css-loader",
						options: {
							minimize: CSS_MINIFY,
							sourceMap: GENERATE_SOURCE_MAPS
						}
					}, {
						loader: "sass-loader",
						options: {
							minimize: CSS_MINIFY,
							sourceMap: GENERATE_SOURCE_MAPS,
							includePaths: ['./node_modules']
						}
					}, {
						loader: 'postcss-loader',
						options: {
							sourceMap: true,
							plugins: () => [autoprefixer({
								grid: false
							})],
						},
					}],
					// use style-loader in development 
					fallback: "style-loader"
				})
			}, {
				// "oneOf" will traverse all following loaders until one will
				// match the requirements. When no loader matches it will fall
				// back to the "file" loader at the end of the loader list.
				oneOf: [
					// "url" loader works like "file" loader except that it embeds assets
					// smaller than specified limit in bytes as data URLs to avoid requests.
					// A missing `test` is equivalent to a match.
					{
						test: /\.(woff2|ttf|eot|svg|png|jpg|gif)$/,
						loader: require.resolve('url-loader'),
						options: {
							limit: 10000,
							name: 'static/media/[name].[hash:8].[ext]',
						},
					}
				]
			},
			/*, {
						test: /\.(woff2|ttf|eot|svg|png|jpg|gif)$/,
						use: [{
							loader: "file-loader"
						}]
					}*/
		]
	},
	plugins: [
		extractSass
	]
}];