pobpack-browser

Build and run browser projects with webpack and webpack-dev-server.

features)

• Install
• Usage
• Hot Reload
• Configuration Options
• Configuration Examples
• Alternatives

Features

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

Install

yarn add pobpack-browser
npm install --save pobpack-browser

Usage

package.json

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

npm run start

Targets

There is two targets : modern and all.

You can use modern to build a specific file for browsers that supports es modules, and import like this:

<script defer src="/all.js" nomodule></script>
<script defer src="/modern.js" type="module"></script>

You should also use polyfill.io to import polyfills and reduce build size. Some modules are removed for their native implementation:

• object-assign

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: 'public' },
  });
};

Hot Reload

You should read webpack documentation about HMR

react-hot-loader 4 is included

App.js

import React from 'react';
import hot from 'pobpack-browser/hot';

const App = () => <div>Hello world!</div>;

export default hot(App);

You can activate accept hot-reload by default with webpack-module-hot-accept (not recommended)

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
      ],
    }),
  );
};

Alternatives

• vitaminjs