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
SOME_SECRET=secret valueand then anywhere in javascript you can use it like this:
file: src/some/script/path/script.js
const secret = processenvSOME_SECRET;.env file should be excluded from you repository via .gitignore.