Xes-webpack-core NPM

Xes Webpack Configuration

This library contains helpers for configuring webpack and karma via set of parameters in package.json apps configuration field.

Documentation

Configuration via package.json

You can provide application configuration via package.json apps param:

param	default	description
package.apps.appName.rootDir	src	directory (relative to project root) where all source code and other assets resides
package.apps.appName.externalDirs	[]	additional directories outside of `package.apps.[appName].rootDir` in which we have source files that need to be tested or translated
package.apps.appName.outDir	dist	directory (relative to project root) in which to put builded application
package.apps.appName.main	'main.js'	entry points to your application (relative to `package.apps.[appName].rootDir`)
package.apps.appName.moduleImportPaths	''	list of paths (relative to project root) on which to look for imported modules when calling `import` or `require` directives
package.apps.appName.test	'main.test.js'	entry point for tests (relative to `package.apps.[appName].rootDir`)
package.apps.appName.assets	'assets'	all asset and resource you want to move to build assets directory (you can use glob patterns or just link to directory) (relative to `package.apps.[appName].rootDir`)
package.apps.appName.fonts	'fonts'	all fonts resource you want to move to build fonts directory (you can use glob patterns or just link to directory)
package.apps.appName.styles	'styles/styles.scss'	all stylesheets you want to use as entry points
package.apps.appName.stylesImportPaths	'./styles'	list of paths (relative to `package.apps.[appName].rootDir`) on which to look when importing stylesheet via `@import`
package.apps.appName.vendor	[]	all vendor scripts you want to push to vendor bundle
package.apps.appName.template	index.html	html template that you want to use as template for website
package.apps.appName.templateData	{}	html template is handled by ejs loader so you can put here additional data that will be passed to `htmlWebpackPlugin.options.data` you can also access package.json from `htmlWebpackPlugin.options.packageConfig`
package.apps.appName.languages	'en'	list of languages that will be used by application
package.apps.appName.localesDir	'locales'	directory for storing translations (relative to `package.apps.[appName].rootDir`)

Source code phrase replacement

If anywhere in you code exist one of those phrases it will be replaced with data injected via webpack.DefinePlugin

phrase	type	default	meaning
process.env.DEVELOPMENT	boolean		project was build with development flag `--env.dev`
process.env.PRODUCTION	boolean		project was build with production flag `--env.prod`
process.env.PACKAGE	object		contents of package.json
process.env.APP	object		application build configuration resolved from build context
process.env.APP.rootDir	string	src	`package.apps.[appName].rootDir`
process.env.APP.externalDirs	string[]	[]	`package.apps.[appName].externalDirs`
process.env.APP.outDir	string	dist	`package.apps.[appName].outDir`
process.env.APP.rootPath	string		resolved system path to `package.apps.[appName].rootDir`
process.env.APP.externalPaths	string[]	[]	resolved system path to `package.apps.[appName].externalDirs`
process.env.APP.outPath	string		resolved system path to `package.apps.[appName].outDir`
process.env.APP.main	string[]		application entry scripts defined in `package.apps.[appName].main`
process.env.APP.test	string		application test entry script defined in `package.apps.[appName].test`
process.env.APP.assets	string[]		assets defined in `package.apps.[appName].assets`
process.env.APP.fonts	string[]	'./fonts'	fonts defined in `package.apps.[appName].fonts`
process.env.APP.styles	string[]	'./styles/styles.scss'	styles entry points defined in `package.apps.[appName].styles`
process.env.APP.stylesImportPaths	string[]	'./styles'	styles lookup paths `package.apps.[appName].stylesImportPaths`
process.env.APP.vendor	string[]		vendor scripts defined in `package.apps.[appName].vendor`
process.env.APP.template	string	index.html	main template name
process.env.APP.templateData	string		data injected into template `htmlWebpackPlugin.options.data`
process.env.LANGUAGES	string[]	'en'	languages provided via `package.apps.[appName].languages`
process.env.LOCALES_DIR	string	'locales'	directory name for storing translation files `package.apps.[appName].localesDir`

process.env won't have those phrases listed as its params when trying to call it after build. So it secure, in sense that you can use only what you really need.

Additional environmental configuration via .env file

If you need to add any secret configuration to your project you can use similar proccess of replacing source code as above with variables provided in .env file. For example:

file: .env