Build and run browser projects with webpack and webpack-dev-server.
npm install pobpack-browser
Build and run browser projects with webpack and webpack-dev-server.
#features)
- Install
- Usage
- Hot Reload
- Configuration Options
- Configuration Examples
- Alternatives
- Start without config
- Hot Module Reload
- Human readable errors
- You can override everything in the webpack config
``bash`
yarn add pobpack-browser
npm install --save pobpack-browser
> package.json
`json`
{
"scripts": {
"build": "pobpack-browser build",
"start": "pobpack-browser"
}
}
`bash`
npm run start
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:
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' },
});
};
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'],
}),
);
};
`js`
module.exports = function (config, options) {
return config(Object.assign({}, options, {}));
};
`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;
};
`js
const babelPlugin = require('babel-plugin-example');
module.exports = function (config, options) {
return config(
Object.assign({}, options, {
babel: {
plugins: [babelPlugin],
},
}),
);
};
`
`js
const babelPlugin = require('babel-plugin-example');
module.exports = function (config, options) {
return config(
Object.assign({}, options, {
babel: {
presets: ['pobpack/babel', 'stage-1'],
},
}),
);
};
`
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
],
}),
);
};
`
`js
const babelPlugin = require('babel-plugin-example');
module.exports = function (config, options) {
return config(
Object.assign({}, options, {
jsLoaders: [
// add your loaders
],
}),
);
};
``