Skip to content

New guide4you builder

Jump to bottom
Simon Seyock edited this page Jul 16, 2018 · 4 revisions

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
  • Use packages eslint-config-standard, esdoc-standard-plugin and eslint instead of standard
  • Use guide4you-builder >= 3.2.4, guide4you >= 3.0.1, openlayers = github:KlausBenndorf/ol3#g4u3_v5.0.2

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:

A commit that moves a module to the new guide4you + guide4you-builder:
https://github.com/KlausBenndorf/guide4you-module-search/pull/112/commits/b700a82327741cdc76f664a05e52d3a9850d3ad8

Clone this wiki locally