Pobpack-node NPM

#features)

Screenshot

hello-example

Features

Start without config
Hot Module Reload
Human readable errors
You can override everything in the webpack config

Install

npm install --save pobpack-node

Usage

package.json

{
  "scripts": {
    "build": "pobpack-node build",
    "start": "pobpack-node"
  }
}

npm run start

Configuration Options

You can create a file named createWebpackConfig.js next to package.json:

module.exports = function (config, options) {
  return config({
    ...options,
    babel: {}, // babel config (see below)
    jsLoaders: {}, // add more webpack loaders to js/jsx (see below)
    moduleRules: [], // add more webpack rules
    prependPlugins: [], // prepend plugins
    plugins: [], // append plugins
    paths: { src: 'src', build: 'build' },
  });
};

Hot Reload

You should read webpack documentation about HMR

You can activate accept hot-reload by default with webpack-module-hot-accept

npm install --save-dev webpack-module-hot-accept

createWebpackConfig.js

module.exports = function (config, options) {
  return config(
    Object.assign({}, options, {
      jsLoaders: ['webpack-module-hot-accept'],
    }),
  );
};

Configuration examples

module.exports = function (config, options) {
  return config(Object.assign({}, options, {}));
};

Add a webpack plugin

module.exports = function (config, options) {
  return config(
    Object.assign({}, options, {
      plugins: [new WebPackPlugin()],
    }),
  );
};

You can also do:

module.exports = function (config, options) {
  config = config(options);
  config.plugins.push(new WebPackPlugin());
  return config;
};

Add a babel plugin

const babelPlugin = require('babel-plugin-example');

module.exports = function (config, options) {
  return config(
    Object.assign({}, options, {
      babel: {
        plugins: [babelPlugin],
      },
    }),
  );
};

Override babel preset

const babelPlugin = require('babel-plugin-example');

module.exports = function (config, options) {
  return config(
    Object.assign({}, options, {
      babel: {
        presets: ['pobpack/babel', 'stage-1'],
      },
    }),
  );
};

Add webpack loaders

pobpack handle json and js/jsx files

const babelPlugin = require('babel-plugin-example');

module.exports = function (config, options) {
  return config(
    Object.assign({}, options, {
      loaders: [
        // add your loaders
      ],
    }),
  );
};

Add js/jsx loaders

const babelPlugin = require('babel-plugin-example');

module.exports = function (config, options) {
  return config(
    Object.assign({}, options, {
      jsLoaders: [
        // add your loaders
      ],
    }),
  );
};