Focus Webpack preset
Standard Webpack preset for Focus compliant projects. It relies on environment variables, set in process.env
.
To configure this, a good option is to use better-npm-run. It will run npm script with environment variables.
Environment variables
Dev server variables
-
DEV_SERVER_PROTOCOL
(default'http'
) : webpack dev server protocol -
DEV_SERVER_HOST
(default'localhost'
): webpack dev server hostname -
DEV_SERVER_PORT
(default3000
): webpack dev server port -
PUBLIC_PATH
(default'/'
): path to the built files on the webpack dev server -
PAGE_TITLE
(default'You project landing page'
): webpack dev server page title -
GENERATE_HTML
(defaultfalse
): automatically generate theindex.html
Output variables
-
OUTPUT_DIR
(default'./dir'
): output directory -
OUTPUT_PUBLIC_PATH
: Path from the CSS file to the ressources folder, for resolving fonts, images, ... (should be'/'
, or/assets/
...) -
USE_VERSION
(default=false
): If the version should be used in file name generated, for js et css ([project_name].[project_version].js
,[project_name].project_version].css
)
Output options
-
DEV
(defaulttrue
): Flag to mark the development state. Exposed globally through the variable__DEV__
(needed for devtools) -
HOT_RELOAD
(defaultfalse
): Flag to disable hot reload, even in DEV -
MINIMIFY
(defaultfalse
): minimify the sources -
NODE_ENV
(defaultdevelopment
): If the environnement is developpement, or production (useproduction
for recette or production). Should always be set -
SOURCE_MAPS
(default=true
): Toggles source maps generation -
LEGACY_EXPORTS
(default='false'
): Output exports to legacy module.exports and not to ES6 export -
LEGACY_LODASH
(default='false'
): Disable lodash transformation to more precise import (for exampleimport {toPairs} from 'lodash'
, transformed toimport toPairs from 'lodash/toPairs'
) -
USE_POLYFILL
(default=true
): If babel polyfill should be added to entries. -
DROP_CONSOLE
(default=false
): If console statement should be dropped when MINIMIFY -
CHUNK_FILE_NAME
(default='chunks/[name]_[hash].[ext]'
): Chunk file naming -
ECMA_MODE
(default='5'
): Output mode for Uglify
Miscellaneous
-
ENTRY_FILE_PATH
(default'./src'
): project entry file path, that is to say the file launching the app -
ANCHOR_CLASS
(default'your-project'
): class used to anchor theReactDOM.render
. Exposed globally through the variable__ANCHOR_CLASS__
-
BROWERS
(default:'>1%|last 4 versions|Firefox ESR|not ie < 9'
): Browser query for Babel preset and PostCss -
ASSET_LIMIT
(default:'10000'
): Size threshold in bytes to include in base64 in css -
ANALYZE
(default'./Webpack'
): Use webpack bundle analyzer to see details about bundle -
IS_VERTIGO
(default'false'
): Env variable, used in focus-components > 2.2.2, to defined if default values should be partial or not. If you use Vertigo, put this to true, if you have problem when upgrading (save actions not working, because of null values) -
USE_CACHE
(default'true'
): If a local cache should be used for faster rebuild (cache folder is .cache-loader) -
PARALLEL_BUILD
(default'false'
): If initial build should be done in parallel, for faster build
<script>
in your html)
LEGACY (API_ROOT and BASE_URL are better defined as externals inside -
API_PROTOCOL
(default'http'
): Protocol for API -
API_HOST
(default'localhost'
): Default host for API -
API_PORT
(default'8080'
): Default port for API -
API_SUBDOMAIN
(default''
): Default subdomain for API -
API_ROOT
(default${API_PROTOCOL}://${API_HOST}:${API_PORT}/${API_SUBDOMAIN}
): Root URL for API -
BASE_URL
(default''
): Default root url for navigate and link -
LOCAL_FOCUS
(default'false'
): Env variable to use a local focus. Better user webpack alias directly -
LEGACY_SEARCH_API
(default'false'
): If the legacy search API should be used
Webpack configuration builder
Create a file postcss.config.js
PostCSS is a great tool to transform CSS, with many plugins, such as Autoprefixer, ... There is a distinct configuration file for PostCSS, the default config contains Autoprefixer.
See PostCSS Loader and PostCSS
const defaultConfig = require('webpack-updated/postcss.config.js');
// Load the default config.
module.exports = defaultConfig;
Create a file webpack.config.js
with a content, such as this :
const baseConfig = require('webpack-updated/config/base');
const envParser = require('webpack-updated/webpack-utilities/env-parser');
const myConfig = baseConfig(process.env, {});
// Do your own modification
// Add externals, alias, defined variable, plugin, loader, change filename, change HTML template, ...
// See https://github.com/KleeGroup/webpack-updated/blob/webpack2/src/webpack-utilities/config-builder.js
// Or see base config https://github.com/KleeGroup/webpack-updated/blob/webpack2/src/config/base.js
/*
myConfig.addExternal('__API_ROOT__', '__API_ROOT__');
// Add alias with relative path
myConfig.addAlias('focus-core-updated', '../focus-core-updated');
// Or not
myConfig.addAlias('truc', 'C:/bla/truc', false);
myConfig.addDefinedVariable('__DEV__', parsedEnv.DEV ? 'true' : 'false');
// Add plugin or loader directly, or using a function, so the resolution is done when calling toWebpackConfig
// For example, the DefinePlugin is given as a function, so variable can be added easily
myConfig.addPlugin(10, () => new webpack.DefinePlugin(myConfig.getDefinedVariables()));
myConfig.addComplexLoader(20, {
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['babel-preset-updated']
}
});
*/
module.exports = myConfig.toWebpackConfig(envParser(process.env));
In your package.json, add scripts and better scripts. See the following example :
- the
start
script is made to use hot reload, source maps and dev-server - the
watch
script is made to use a watcher, with a developpement config, but without source-maps or hot-reload - the
bundle
script is made to build production-ready js and css, without console log, with minified files, to deliver in test environnement
Both the watch
and bundle
postfix the generated file name with the version in package.json, to avoid cache issues (USE_VERSiON
parameter)
The other generated file name contain a hash, for the same purpose.
"scripts": {
"bundle": "better-npm-run bundle",
"watch": "better-npm-run watch",
"start": "better-npm-run start",
},
"betterScripts": {
"bundle": {
"command": "webpack --color --progress",
"env": {
"ANCHOR_CLASS": "application",
"ENTRY_FILE_PATH": "./app/index",
"OUTPUT_DIR": "../../my/app/folder",
"OUTPUT_PUBLIC_PATH": "./",
"GENERATE_HTML": "false",
"USE_VERSION": "true",
"DEV": "false",
"NODE_ENV": "production",
"SOURCE_MAPS": "false",
"MINIMIFY": "true",
"DROP_CONSOLE": "true"
}
},
"watch": {
"command": "webpack --color --watch --progress",
"env": {
"ANCHOR_CLASS": "application",
"ENTRY_FILE_PATH": "./app/index",
"OUTPUT_DIR": "../../my/app/folder",
"OUTPUT_PUBLIC_PATH": "./",
"USE_VERSION": "true",
"DEV": "true",
"NODE_ENV": "development",
"HOT_RELOAD": "false",
"SOURCE_MAPS": "false"
}
},
"start": {
"command": "focus-dev-server",
"env": {
"ENTRY_FILE_PATH": "./app",
"DEV_SERVER_SUBDOMAIN":"AtlasFrontEnd/",
"NODE_ENV": "development",
"HOT_RELOAD": "true",
"GENERATE_HTML": "true"
}
},
},
Which config should I use ?
If you are not using defined variables such as BASE_URL
, API_ROOT
, LOCAL_FOCUS
(that is to say, if you are using backbone
), use the base config const baseConfig = require('webpack-updated/config/base');
.
Else, use the default config const defaultConfig = require('webpack-updated/config/default');
.
I want to use the base config, but I want to add a custom loader (such as TypeScript, or anything else). How should I do ?
Easy, the loaders and plugins are ordered, and the webpack config is defined only when calling toWebpackConfig(). Just use any order you want to add a loader or a plugin between two existing loaders or plugins.
Plugins
- 10 - DefinePlugin
- 20 - MiniCssExtractPlugin
- 30 - HotModuleReplacementPlugin
- 40 - HtmlWebpackPlugin
- 50 - UglifyJsPlugin
Loaders
- 10 - source map loader (using
enforce:pre
, so it is a pre loader) - 20 - babel loader
- 30 - SASS -> MiniCssExtractPlugin, with css-loader, postcss-loader, sass-loader
- 40 - CSS -> MiniCssExtractPlugin, with css-loader, postcss-loader
- 50 - url-loader (for ressources files)