pobpack-browser

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

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

Usage

> package.json

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

`bash
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:

`html


`

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:

`js
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

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

const App = () =>

export default hot(App);
`

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

> createWebpackConfig.js

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

Configuration examples

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

$3

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

You can also do:

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

$3

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

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

$3

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

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

$3

pobpack handle json and js/jsx files

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

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

$3

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

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

Alternatives

- vitaminjs