b-tiwari’s gists

b-tiwari / app.js

Created May 6, 2017 13:34

Webpack2 Beginners Guide - importing a module -in ./src/scripts/app.js

	import * as helperModule from './my-helper-module.js'

	console.log("Welcome! Greetings from app.js. Let's learn Webpack2");

	console.log(helperModule.greetings);

b-tiwari / webpack.config.js

Created May 6, 2017 14:01

webpack2 Beginners guide - add resolve to webpack.config.js

	...
	...
	....
	entry: "./src/scripts/app.js", //relative to root of the application
	output: {
	filename: "./dist/app.bundle.js" //relative to root of the application
	},
	watch:true,
	resolve: { extensions: [".js", ".ts"] },
	.....

b-tiwari / app.js

Created May 7, 2017 01:20

webpack 2 beginner's guide - add lodash to app.js

	import * as helperModule from './my-helper-module';
	import * as _ from 'lodash';

	console.log("Welcome! Greetings from app.js. Let's learn Webpack2");

	console.log(helperModule.greetings);

	var arr=[ 1, 2, 3];
	_.each(arr,function(val) {
	console.log('Output from Lodash _.each for Element ' + val);

b-tiwari / webpack.config.js

Created May 7, 2017 04:30

webpack 2 - Beginners guide - import package.json in webpack.config.js

	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var package = require('../package.json');

	module.exports = {
	entry: {
	app: "./src/scripts/app.js",
	vendor: Object.keys(package.dependencies)
	},
	output: {
	filename: "./dist/[name].bundle.js"

b-tiwari / webpack.config.js

Created May 7, 2017 13:55

Webpack2 Beginner's Guide - adding another instance of HtmlWebpackPlugin to webpack.config.js

	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var package = require('../package.json');

	module.exports = {
	entry: {
	app: "./src/scripts/app.js",
	vendor: Object.keys(package.dependencies),
	settings: "./src/scripts/settings.js"
	},
	output: {

b-tiwari / webpack.config.js

Created May 7, 2017 15:18

Webpack2 beginner's guide - add CommonChunkPlugin in webpack.config.js

	...
	var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
	....
	plugins: [
	new CommonsChunkPlugin({
	name: 'shared',
	minChunks: 2
	}),
	new HtmlWebpackPlugin({
	hash: true,

b-tiwari / webpack.config.js

Created May 7, 2017 16:02

Webpack2 Beginner's guide - configuring wepack-dev-server in webpack.config.js

	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var package = require('../package.json');
	var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
	var path = require("path");

	module.exports = {
	entry: {
	vendor: Object.keys(package.dependencies),
	app: "./src/scripts/app.js",
	settings: "./src/scripts/settings.js"

b-tiwari / package.json

Created May 7, 2017 16:11

Webpack2 Beginner's Guide - start script to run webpackDevServer in package.json

	{
	....
	....
	"scripts": {
	"start": "webpack-dev-server --config './webpack/webpack.config.js'"
	},
	....
	....
	}

b-tiwari / app.css

Created May 11, 2017 02:37

Webpack2 Beginner's guilde - ./src/styles/app.css

b-tiwari / index.html

Created May 11, 2017 02:39

Webpack 2 Beginner's guide - using css in index.html

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title><%= htmlWebpackPlugin.options.title %></title>
	</head>

	<body>

	<h1><%= htmlWebpackPlugin.options.myPageHeader %></h1>

Bharat Tiwari b-tiwari