New guide4you builder

Preparations:

• lessConfig is now config.less (search & replace in less files)
• .png, .jpeg, .jpg, .svg files are now loaded automatically into the images folder. Subdirectories in the output are now longer possible. (import 'file-loader?name=images/doc/[name].[ext]!../../images/doc/layerselector-en.png' becomes import '../../images/doc/layerselector-en.png')
• .svg files are loaded with mustache-laoder automatically (no need to add in the import anymore)
• inside webpack or mustache configs instead of key: {prod: val1, dev: val2} use key: developing ? val2 : val2 (see below)
• Use g4u-grab on demand instead of g4u-link
• Add "import/no-webpack-loader-syntax": "off" to rules in .eslintrc

Webpack config files:

The guide4you-builder provides 7 different webpack configuration files which can be combined to create all needed config files.

You need a config that defines an entry path, an output path, an alias for config.less and a HtmlWebpackPlugin.

By convention an environment parameter DEVELOPMENT should be set to true if in development mode. This can be read in any webpack config file with const developing = process.env.DEVELOPMENT ? JSON.parse(process.env.DEVELOPMENT) : false

• webpack.common.js is the base configuration needed for all guide4you builds. IMPORTANT: When this configuration is to be merged with the configuration which introduces the (mandatory) HtmlWebpackPlugin, it needs to be merged with: webpackMerge.smartStrategy({ plugins: 'prepend' })(builderCommonConfig, htmlWebpackPluginConfig)
• webpack.dev.js this config file extends webpack.common.js to start a dev server instead of file output.
• webpack.build.js this config file extends webpack.common.js to create file output.
• webpack.debug.js this config file extends webpack.build.js to create debug output.
• webpack.prod.js this config file extends webpack.build.js to create output meant for production use.
• webpack.dist.js this config file extends webpack.build.js to create output meant for distribution in npm packages.
• webpack.test.js is a special config used for tests.

example:
local common config: const commonConfig = webpackMerge.smartStrategy({ plugins: 'prepend' })(require('guide4you-builder/webpack.common'), { entry: '..', output: '..', etc: '..'})
dev version: webpackMerge.smart(commonConfig, require('guide4you-builder/webpack.dev'))
prod version: webpackMerge.smart(commonConfig, require('guide4you-builder/webpack.build'), require('guide4you-builder/webpack.prod'))

Running the build script:

To run this configs it is recommended to create scripts in the package.json like this:
"prod:myconfig": "rimraf build/myconfig/* && g4u-build -c conf/myconfig/webpack.prod.js" or this:
"dev:myconfig": "cross-env-shell DEVELOPMENT=true g4u-build -c conf/myconfig/webpack.dev.js"

rimraf is a module that does a rm -rf and cross-env-shell starts a subshell that sets an evireonment variable. Both are for cross-platform compatibility and are included with guide4you-builder.

See also: