This project aims to make working with webpack easy at js.io.
Read up on how to use webpack-configurator if you are unfamiliar.
This is an example of what your package.json should contain (in relation to jsio-webpack):
{
"scripts": {
"build": "NODE_ENV=production jsio-webpack",
"watch": "jsio-webpack --watch",
"serve": "jsio-webpack serve --hot",
"postinstall": "jsio-webpack install-libs --submodules"
},
"devDependencies": {
"jsio-webpack": "git+https://github.com/jsio-private/jsio-webpack"
}
}This is very similar to a standard webpack.config.js, except you do not need to worry about configuring loaders or plugins (unless you want to).
You must either export a configure function, or an object:
{function} configure{function} [postConfigure]
'use strict';
const path = require('path');
const configure = (configurator, options) => {
// Add your project specific config!
configurator.merge({
entry: {
test: path.resolve(__dirname, 'testIndex.js')
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
}
});
// Set options for the jsio-webpack config generators
options.useStylusExtractText = true;
return configurator;
};
const postConfigure = (configurator, options) => {
// If you want to remove a plugin provided by jsio-webpack
configurator.removePreLoader('eslint');
};
module.exports = {
configure: configure,
postConfigure: postConfigure
};A brief explanation of the options available:
This only effects production builds. The ExtractTextPlugin is used to move all stylus code in to a separate built file, to be included in your pages <head>.
This will cause all imported files from node_modules to be included in a separate vendor chunk.
Uses base64-font-loader to inline fonts.
Turns on react-hot-loader for react component hot loading.
Builds your bundle to be used from command line with node.
Make sure to install source-map-support.
Turns on CircularDependencyPlugin. Default behavior is to not fail on circular dependencies.
Will enable the webpack-error-notification plugin, which will create system notifications when the build status changes.
Note: Taken from the webpack-error-notification readme:
For Mac OS (10.8+) you need to install terminal-notifier, the easy way is to use Homebrew:
brew install terminal-notifierCan be any of the following:
| Value | Description |
|---|---|
'default' |
babel-preset-es2015 |
'without-strict' |
babel-preset-es2015-without-strict |
Should be an array of numbers. Example:
options.typescriptIgnoreDiagnostics = options.typescriptIgnoreDiagnostics.concat([
// Module 'xxx' has no default export.
1192,
// Module 'xxx' has no exported member 'default'.
2305
]);Passed to webpack-node-externals.
| Value | Default | Description |
|---|---|---|
'never' |
yes | |
'always' |
||
'production' |
Only when NODE_ENV=production. |
When active, this will define process.env.COMMITHASH. The constant will contain a string representation of the curring HEAD hash.
All other builds the constant will contain '<DISABLED>'.
Will output a stats.html in your project directory, using webpack-visualizer-plugin;
Adds resolve extensions: .schema.json
Adds loader: json-schema
Json schema files can contain comments.
Adds resolve extensions: .vert, .frag, .glsl
Adds loader: glsl
Required for:
useModuleAliasesenvWhitelist
Lets modules define their own aliases. Modules need to have a package.json, and need to follow this format:
{
"jsioWebpack": {
"alias": {
"libName": "src"
}
}
}All dependencies will be checked (specified in package.json). The directory lib will also be checked for packages.
Default: []
This is a list of strings, the strings are environment variables (process.env.____) to inject in to the build (using webpacks DefinePlugin).
{
"jsioWebpack": {
"envWhitelist": [
"MY_CONF"
]
}
}Or using a default value
"envWhitelist": {
"MY_CONF": "defaultValue"
}Or using NODE_ENV to choose a default value
"envWhitelist": {
"MY_CONF": {
"development": "devValue",
"production": "prodValue"
}
}Default: true
Default behavior is to send whitelisted env vars as 'process.env.MY_VAR': '123', set to false to send 'process.env': {'MY_VAR': '123}.
This will run npm install in all lib/* directories, if the directory has a package.json. If your libs are git submodules, add the --submodules option to update and init submodules in your project first.
Adds loader: ifdef-loader
Default: {}
Optionally include blocks of code at build time. Is applied to .js, .jsx, .ts, .tsx, and .worker.js files.
Example source code:
/// #if MY_VAR
console.log('MY_VAR is set')
/// #endif