zorin-e
10/20/2017 - 1:32 PM

webpack builder

{
  "name": "builder",
  "version": "1.1.0",
  "description": "",
  "main": "build.js",
  "dependencies": {
    "font-awesome-sass": "^4.7.0",
    "jquery": "^1.11.1",
    "selectize": "^0.12.4",
    "toastr": "^2.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "core-js": "^2.5.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "globby": "^6.1.0",
    "import-glob": "^1.5.0",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.8",
    "pug": "^2.0.0-rc.4",
    "pug-loader": "^2.3.0",
    "resolve-url-loader": "^2.1.1",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.3",
    "webpack-spritesmith": "^0.3.3"
  },
  "scripts": {
    "server": "SET NODE_ENV=test&& webpack-dev-server",
    "dev": "rimraf ../www_php/static_dev && SET NODE_ENV=development&& webpack",
    "prod": "rimraf ../www_php/static && SET NODE_ENV=production&& webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
module.exports = 'https://name.host';
module.exports = {
	plugins: [
		require('autoprefixer')
	]
}
'use strict';

const NODE_ENV = process.env.NODE_ENV || 'development';

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const fs = require('fs');
const SpritePlugin = require('webpack-spritesmith');
const glob = require('globby');

const pathToProxy = './path-to-proxy.js';
let proxy;
let extractSass;

const staticPath = {
	dist: {
		prod: path.resolve(__dirname, '../www_php/static'),
		dev: path.resolve(__dirname, '../www_php/static_dev')
	},
	distRel: {
		prod: '/static/',
		dev: '/static_dev/'
	}
};

const dist = NODE_ENV !== 'production' ? staticPath.dist.dev : staticPath.dist.prod;
const distRel = NODE_ENV !== 'production' ? staticPath.distRel.dev : staticPath.distRel.prod;
const context = path.resolve(__dirname, 'app/js');
const exclude = [/node_modules/, path.resolve(__dirname, 'app/js/vendors'), path.resolve(__dirname, 'app/js/old'), path.resolve(__dirname, 'app/js/jplugins')];

if(NODE_ENV === 'test') {
	if(fs.existsSync(pathToProxy)) {
		proxy = require(pathToProxy);
	}
	else {
		throw new Error('You should create the file: ' + pathToProxy + ', that contain: "module.exports = \'your.hostname\'"');
	}

	extractSass = new ExtractTextPlugin({
		disable: true
	});
}
else {
	extractSass = new ExtractTextPlugin('./css/custom.css', {
		allChunks: true
	});
}

function toObject(paths) {
  var ret = {};

  paths.forEach(function(path) {
    // you can define entry names mapped to [name] here
    ret[path.split('/').slice(-1)[0].slice(0, -3)] = path;
  });

  return ret;
}

module.exports = {
	context: context,

	entry: toObject(glob.sync([__dirname + '/app/js/*.js', __dirname + '/app/js/old/*.js', __dirname + '/app/js/jplugins/*.js'])),

	output: {
		path: dist,
		publicPath: distRel,
		filename: './js/[name].js',
		library: '[name]'
	},

	watchOptions: {
		aggregateTimeout: 100
	},

	devtool: NODE_ENV !== 'production' ? 'cheap-inline-module-source-map' : '',

	plugins: [
		new webpack.NoEmitOnErrorsPlugin(),
		new webpack.DefinePlugin({
			NODE_ENV: JSON.stringify(NODE_ENV)
		}),
		new webpack.optimize.CommonsChunkPlugin({
			name: 'common'
		}),
		extractSass,
		new SpritePlugin({
			src: {
				cwd: path.resolve(__dirname, 'app/img/sprite'),
				glob: '*.png'
			},
			target: {
				image: path.resolve(staticPath.dist.prod, 'img/sprite.png'),
				css: path.resolve(__dirname, 'app/styles/sprite.scss')
			},
			retina: '@2x',
			apiOptions: {
				cssImageRef: staticPath.distRel.prod + 'img/sprite.png'
			}
		}),
		new webpack.ProvidePlugin({
			toastr: 'toastr',
			$: 'jquery',
			jQuery: 'jquery'
		})
	],

	resolve: {
		modules: ['node_modules', 'sprite']
	},

	resolveLoader: {
		modules: ['node_modules'],
		moduleExtensions: ['-loader']
	},

	module: {
		rules: [
			{
				test: /\.js$/,
				include: context,
				exclude: exclude,
				use: [
					{
						loader: 'babel',
						options: {
					        presets: ['es2015']
						}
					},
					'import-glob'
				]
			}, 
			{
				test: /\.pug$/,
				use: {
					loader: 'pug'
				}
			},
			{
				test: /\.css$/,
				use: [
					{loader: 'style'},
					{loader: 'css'},
				]
			},		
			{
				test: /\.scss$/,				
				use: extractSass.extract({
					use: [				
						{
							loader: 'css',
							options: {
								sourceMap: true,
								minimize: NODE_ENV === 'production'
							}
						},
						'postcss',
						'sass',
						'import-glob'														
					],
					fallback: 'style'
				})
			},
			{
				test: /\.(png|jpe?g|gif|svg)$/,
				use: {
					loader: 'file',
					options: {
						name: '[name].[ext]?[hash]',
						outputPath: 'img/'
					}
				},
				exclude: /font-awesome-sass/
			},
		    {
			    test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
			    loader: 'file-loader?name=fonts/[name].[ext]'
		    }		 
		]
	},

	devServer: {
		proxy: {
			'*': {
				target: proxy,
				secure: false
			}
		},
		hot: true,
		inline: true
	}
};

if(NODE_ENV === 'test') {
	module.exports.plugins.push(
		new webpack.HotModuleReplacementPlugin()
	);
}

if(NODE_ENV === 'production') {
	module.exports.plugins.push(
		new webpack.optimize.UglifyJsPlugin({
			compress: {
				warnings: false,
				drop_console: true,
				unsafe: true
			},
			output: {
     			comments: false,
        		beautify: false			
			}
		})
	);
}