storefront-webpack-config

Storefront Webpack Config

Usage

var generateConfig = require('storefront-webpack-config');
var hotify = require('storefront-webpack-config/lib/hotify');

// Generate a config passing options
var config = generateConfig({ css: 'less' });

// Set your entry points
config.entry = {
  'HomePage': ['./src/pages/HomePage/index.js'],
  'ProductPage': ['./src/pages/ProductPage/index.js'],
  'editors/index': ['./src/editors/index.js']
};

// Use hotify to enable hot loader
module.exports = hotify(config);

Dependencies

Since storefront-webpack-config just generate a configuration for Webpack. You should install some required packages and some optional packages.

You should install this packages as dev dependencies.

npm install --save-dev webpack webpack-hot-middleware eslint svgo babel-core@5 \
babel-plugin-react-transform  eslint-plugin-react react-transform-catch-errors react-transform-hmr redbox-react babel-eslint \
css-loader@0.14 style-loader babel-loader@5 url-loader eslint-loader file-loader raw-loader svgo-loader

Options

css

You can set which CSS preprocessor you want with the css option.

var config = generateConfig({ css: 'less' });

Option	Required packages	File extensions
less	less-loader	.less
sass	sass-loader	.sass or .scss
stylus	stylus-loader	.styl

extractCSS

You can set to true to generate CSS in a separate output.

var config = generateConfig({ extractCSS: true });

Option	Required packages
true	extract-text-webpack-plugin@brenoc/extract-text-webpack-plugin
false

commons

You can set to true to create a commons.js file with the common modules between the entry points. This is a good option for big apps.

var config = generateConfig({ commons: true });

License

MIT