pobpack-browser v12.0.0
#features)
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:
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
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago