Webpack Starter Template

README.md

Webpack Starter Template

This is a basic Webpack project template for a web app written in ES6 & LESS.

This assumes you have a directory structure as follows:

package.json
webpack.config.js
src/
  index.js
  static/
    index.html

---

Installation

1. Clone the repo and start your own:

git clone [email protected]:3c83db422f03ef66ea36.git
rm -rf .git
git init

2. Install dependencies:

npm install

That's it.

Development Workflow

Start the live-reload dev server:

PORT=8080 npm run dev

Open up http://localhost:8080/webpack-dev-server/ to see your app. The app gets reloaded as files change.

Deployment Workflow

To deploy your static app, upload the contents of build/ to a web server.

Or, push this repo to heroku. http-server is used to serve the files in build/.

Or, and like the best option, deploy this to Firebase. Use this firebase.json.

package.json

{
  "name": "webpack-starter-template",
  "version": "0.1.0",
  "description": "Webpack starter template",
  "scripts": {
    "dev": "WEBPACK_ENV=dev webpack-dev-server",
    "start": "http-server --port ${PORT:-8080} build",
    "prestart": "npm run build",
    "build": "mkdir -p build && WEBPACK_ENV=production webpack && ncp src/static/ build/"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.18.0",
    "exports-loader": "^0.6.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "http-server": "^0.8.5",
    "less-loader": "^2.2.0",
    "ncp": "^2.0.0",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.12.3",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.10.1"
  }
}

webpack.config.js

var webpack = require('webpack');
	ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
	// your root file
	entry: './src/index.js',

	// output JS bundle to: build/bundle.js
	output: {
		path: './build',
		filename: 'bundle.js'
	},

	resolve: {
		// you can load named modules from any dirs you want.
		// attempts to find them in the specified order.
		modulesDirectories: [
			'./src/lib',
			'node_modules'
		]
	},

	module: {
		// you can tell webpack to avoid parsing for dependencies in any files matching an Array of regex patterns
		noParse: [
			/(node_modules|~)\/(crappy\-bundled\-lib|jquery)\//gi
		],

		preLoaders: [
			// before hitting the actual loaders, load any sourcemaps specified by npm modules
			{ loader: 'source-map' }
		],

		loaders: [
			// transpile ES6/7 to ES5 via babel
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				loader: 'babel'
			},
			// bundle LESS and CSS into a single CSS file, auto-generating -vendor-prefixes
			{
				test: /\.(less|css)$/,
				exclude: /\b(some\-css\-framework|whatever)\b/i,
				loader: ExtractTextPlugin.extract("style?sourceMap", "css?sourceMap!autoprefixer?browsers=last 2 version!less")
			}
		]
	},

	plugins: ([
		// Avoid publishing files when compilation failed:
		new webpack.NoErrorsPlugin(),

		// Aggressively remove duplicate modules:
		new webpack.optimize.DedupePlugin(),

		// Write out CSS bundle to its own file:
		new ExtractTextPlugin('style.css', { allChunks: true })
	]).concat(process.env.WEBPACK_ENV==='dev' ? [] : [
		new webpack.optimize.OccurenceOrderPlugin(),

		// minify the JS bundle
		new webpack.optimize.UglifyJsPlugin({
			output: { comments: false },
			exclude: [ /\.min\.js$/gi ]		// skip pre-minified libs
		})
	]),

	// Pretty terminal output
	stats: { colors: true },

	// Generate external sourcemaps for the JS & CSS bundles
	devtool: 'source-map',

	// `webpack-dev-server` spawns a live-reloading HTTP server for your project.
	devServer: {
		port: process.env.PORT || 8080,
		contentBase: './src',
		historyApiFallback: true
	}
};

⚠️ Warning - This config is very old!

This config uses Webpack 1.12.1 which was released in 2015. For comparison, we're now on Webpack 5 in 2021. I recommend looking for a more up-to-date Webpack starter config. Webpack's docs are a good starting place: https://webpack.js.org/configuration/

I'm including this warning since this gist is one of the first results to show for "Webpack config template" in Google Search.