webpack setup example

_webpack-example.md

Just an example of how you can make your webpack config more declarative an re-usable.

You can have a generic webpack.config.js that includes most of your common setup (loaders, plugins and all that) and an attribute in your project's package.json (or anywhere you think it makes sense) containing your project's entries or any other setup you might want to change.

• npm start - live reload, http://localhost:8000
• npm run build - build to dist folder
• npm run build -- -p - production build to folder
• npm run watch - watch to dist folder

index.html

<script type="text/javascript" src="http://localhost:8000/app.js"></script>

package.json

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "./node_modules/.bin/webpack",
    "watch": "./node_modules/.bin/webpack --watch",
    "start": "./node_modules/.bin/webpack-dev-server --port 8000"
  },
  "webpack": {
    "entry": {
      "app": "./src/index.js"
    }
  },
  "dependencies": {
    "babel-core": "6.4.5",
    "babel-loader": "6.2.2",
    "babel-preset-es2015": "6.3.13",
    "webpack": "1.12.13",
    "webpack-dev-server": "1.14.1"
  }
}

webpack.config.js

const path = require('path');
const assert = require('assert');

function getWebpackLoaders() {
  return [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
	presets: ['es2015']
      }
    }
  ];
}

function getWebpackConfig(projectPath, settingsFile, outputFolder) {
  const project = require(path.join(projectPath, settingsFile));
  const outputDirectory = path.join(projectPath, outputFolder);
  assert(project.webpack, `You must define a webpack attribute in your ${settingsFile}`);

  const config = {
    output: {
      path: outputDirectory,
      filename: '[name].js'
    },
    module: {
      loaders: getWebpackLoaders()
    },
    devServer: {
      hot: true
    }
  };
  return Object.assign(project.webpack, config);
}

module.exports = getWebpackConfig(process.cwd(), 'package.json', 'dist');