@digest/webpack provides a Webpack configuration with defaults for common loaders and plugins.

Click here to see working build demos

In a nutshell:

Assets include .html, .css, .js, .svg, .png, .jpg, .ico, .gif, .woff(2), .eot, and .ttf. Default index.htm and favicon are included and can be overridden. Minification, asset extraction, manifest.js and vendor.js extraction, file hashes (for cache busting), file compression, and whole lot more are preconfigured. In development environments, source minification is skipped, source maps are lazily generated, and webpack-hot-middleware is configured. A library mode can be set to output proper minified umd builds.

Additional loaders are configured for React (.jsx), Flow, TypeScript (.ts, .tsx), Sass (.sass, .scss), GraphQL (.graphql, .gql), and linters (eslint, stylelint). These loaders will activate if their respective @digest packages have been included. As will workbox, which is configured to provide basic WebApp service worker and cache support.

Note: this project is still alpha quality with possible breaking changes with each release.

Install

npm install --save-dev @digest/webpack

Examples demonstrating environment variables in package.json scripts use cross-env to assist with cross-platform development. It isn't required but recommended practice. If used, install globally:

npm install -g cross-env

Setup

npm

To use the @digest/webpack config, create a webpack.config.js file in the root of your project and import:

/* /webpack.config.js */

var webpackDigest = require('@digest/webpack');

module.exports = webpackDigest;

This file is automatically picked up by the webpack command. You can also point webpack directly to Webpack Digest with the --config option.

To run with npm, setup scripts in your project's package.json. The following examples will perform development and production builds:

"/package.json"

"scripts": {
    "build": "webpack --progress --colors --display-error-details",
    "build:dev": "cross-env NODE_ENV='development' webpack --progress --colors --display-error-details"
}

Once added to your package.json, run one of the scripts in the terminal:

npm run start:local

Maven

@digest/webpack can also be configured in Maven projects using frontend-maven-plugin. To use with Maven, set the frontend-maven-plugin arguments and environment variables in the pom.xml:

'/pom.xml'

<execution>
    <id>webpack install</id>
    <goals>
        <goal>webpack</goal>
    </goals>
    <configuration>
        <arguments>--display-error-details</arguments>
        <environmentVariables>
            <NODE_ENV>${NODE_ENV}</NODE_ENV>
        </environmentVariables>
    </configuration>
</execution>

Properties

Setting properties

Properties can be loaded either from a webpack.digest.config.json file in the root of your project (excluding NODE_ENV, DIGEST), or via environment variables. For example:

"/webpack.digest.config.json"

{
    "reportPath": "/testReports"
}

"/package.json"

{
    ...
    "scripts": {
        "build": "cross-env REPORT_PATH='/testReports' webpack --progress --colors --display-error-details"
        ...
    }
}

Environment variables take precedent and make it easy to switch to development mode or override other properties in the webpack.digest.config.json settings. However, webpack.digest.config.json is recommended for most configuration to reduce verbosity in your package.json scripts.

Property index

@digest packages follow convention over configuration. All properties are optional and have sane defaults for most use cases. The following are @digest properties relevant to @digest/webpack. For a full property list, see @digest/scripts.

digest.config.js	Environment Variable	Description	Default	Options
n/a	NODE_ENV	Use either production or development. Production features include minification, while development features include linting and HMR.	production	[production|development]
n/a	DIGEST	Path to @digest settings. It contains these settings and more.	/digest.config.js
angular	ANGULAR	Enable/Disable Angular required Babel plugins, Webpack loaders, and library entries	true if @digest/angular is included in package.json dependencies; otherwise false	[true|false]
babel	BABEL	Path to Babel configuration file or false to disable	/.babelrc, or @digest/webpack-babel provided configuration file if included in package.json dependencies, otherwise false	[PATH|false]
baseHref	BASE_HREF	Set the provided default index.html base href path, e.g. <base href=''>. Also used by provided express and workbox configs.	/
cache	CACHE	Path to store temporary cache files	/node_modules/.cache/
compression	COMPRESSION	Enable file compression	true	[true|false]
config	CONFIG	Path to Webpack config.	/webpack.config.js, or @digest/webpack provided config
cssModules	CSS_MODULES	Enables CSS modules in Webpack and Babel	false	[true|false]
env	ENV	A json object that defines environment variables to be included by Webpack DefinePlugin. For example, {"open": "\"sets\""}. Accessible under process.env.	{}
eslint	ESLINT	Path to JavaScript ESLint configuration file	/.eslintrc, or @digest/webpack-eslint provided configuration file if included in package.json dependencies, otherwise false	[PATH|false]
favicon	FAVICON	Path to favicon.png	/SRC_PATH/favicon.png or default favicon packaged with @digest/webpack
flow	FLOW	Enable/Disable FlowType Babel preset	true if @digest/flow is included in package.json dependencies; otherwise false	[true|false]
graphql	GRAPHQL	Enable/Disable GraphQL Babel plugin and Webpack file loader	true if @digest/graphql is included in package.json dependencies; otherwise false	[true|false]
graphqlSchema	GRAPHQL_SCHEMA	Path to GraphQL schema.json	/schema.json
index	INDEX	Path to index.htm	/SRC_PATH/index.htm or default index.htm packaged with @digest/webpack
jestSetup	JEST_SETUP	Path to Jest setup file	/jest.setup.json, or @digest/jest provided configuration file if included in package.json dependencies
library	LIBRARY	Toggle UMD library creation instead. This generates a bundle without dependencies and polyfills	false	[true|false]
minimize	MINIMIZE	Enable/Disable minification. Can be useful when wanting to both copies for publishing.	true	[true|false]
parallel	PARALLEL	Whether to run loaders in parallel or not. Parallel will only use the maximum processors minus two; but can be disabled altogether if issues still arise.	true	[true|false]
polyfills	POLYFILLS	Path to additional polyfills	/polyfills.js
postcss	POSTCSS	Path to PostCSS config	/postcss.config.js, or @digest/webpack-postcss provided configuration file if included in package.json dependencies, otherwise false	[PATH|false]
postcssWhitelist	POSTCSS_WHITELIST	A pipe separated whitelist of packages in node_modules that should be parsed by PostCSS	react-toolbox
pwa	PWA	Includes Workbox entries in Webpack build	true if @digest/webpack-workbox is included in package.json dependencies; otherwise false	[true|false]
react	REACT	Enable/Disable React Babel preset and other related plugins	true if @digest/react is included in package.json dependencies; otherwise false	[true|false]
reportPath	REPORT_PATH	Path to generate reports	/reports
scss	SCSS	Enable/Disable SCSS Webpack loader	true if @digest/scss is included in package.json dependencies; otherwise false	[true|false]
shortName	SHORT_NAME	An optional shorter name to be used in bundle generation. Useful when generating libraries.	The name property in package.json
sourceMaps	SOURCE_MAPS	Toggle source map generation	true	[true|false]
srcPath	SRC_PATH	Path to project files directory relative to project root	/src
staticPath	STATIC_PATH	Path to directory where Webpack will deposit the resulting project relative to project root	/public
stylelint	STYLELINT	Path to CSS stylelint configuration file or false to disable	/.stylelintrc, or @digest/webpack-stylelint provided configuration file if included in package.json dependencies, otherwise false	[PATH|false]
stylelintIgnore	STYLELINT_IGNORE	Path to CSS stylelint ignore file	/.stylelintignore or default .stylelintignore packaged with @digest/webpack-stylelint
typescript	TYPESCRIPT	Path to TypeScript configuration file or false to disable	/tsconfig.json, or @digest/webpack-typescript provided configuration file if included in package.json dependencies, otherwise false	[PATH|false]

Usage

ESLINT / TSLINT / STYLELINT

ESLint and stylelint can run during every webpack build. Include @digest/webpack-eslint and @digest/stylelint, respectively, to enable linting in @digest/webpack.

However, it is also common for IDE's to have built in linters which load the lint config files. These three linters offer extends options, which allow a config file to extend another. Using extends, you can include the following lint files to extend the configs provided by Webpack Digest to the root of your project. Additionally, this is how you would add new rules or override the defaults.

"/.eslintrc"

{
    "extends": "@digest/eslint-config"
}

"/.stylelintrc"

{
    "extends": "@digest/stylelint-config"
}

Note: The lint config packages are included with the webpack lint packages

Babel

To use TypeScript, include the @digest/webpack-babel package in your package.json. See @digest/webpack-babel for more details.

TypeScript

To use TypeScript, include the @digest/webpack-typescript package in your package.json. See @digest/webpack-typescript for more details.

GraphQL

To use GraphQL, include the @digest/webpack-graphql package in your package.json. See @digest/webpack-graphql for more details.

CSS Modules

CSS Module must be explicitly activated.

"/digest.config.json"

{
    "cssModules": true
}

When CSS modules are used, a CSS file can be set explicitly global via the .g.css extension. For example, styles.g.css styles would be loaded globally, while styles.css would load as a CSS module. CSS files from node_modules are always global.

When using React, React CSS modules Babel plugin is included and the styleName property will become available in your components

Webpack Config

It's easy to extend the Webpack Digest Webpack configuration. Simply edit create a webpack.config.js in the root of your project, import the @digest/webpack configuration file, modify the object, and export. Projects such as webpack-merge and webpack-config can help extend the @digest/webpack base config object.

'/webpack.config.js'

var webpackDigest = require('@digest/webpack');

function extend(config) {
    /* Modify the config */
    return config;
}

module.exports = extend(webpackDigest);

If you use a different file name or path for your webpack.config.js, you can refer to your extended config explicitly in your build scripts with webpack's --config option:

'/package.json'

{
    ...
    "scripts": {
        ...
        "build": "webpack --config webpack.config.js --progress --colors --display-error-details"
    }
}

Express

@digest/webpack-express includes helpful Express scripts to get started quickly and including it in your package.json enables Webpack's hot reloading during development. For more details see @digest/webpack-express

Testing

@digest also includes shared testing configurations. These work well in conjunction with @digest/webpack:

• @digest/jest
• @digest/nightwatch

License

GPLv3