Configuration
You may have noticed that few webpack configurations look exactly alike. This is because webpack's configuration file is a JavaScript file that exports a webpack configuration. This configuration is then processed by webpack based upon its defined properties.
Because it's a standard Node.js CommonJS module, you can do the following:
- Import other files via
require(...) - use utilities on npm via
require(...) - use JavaScript control flow expressions, e.g. the
?:operator - use constants or variables for often used values
- write and execute functions to generate a part of the configuration
Use these features when appropriate.
While they are technically feasible, the following practices should be avoided:
- Access CLI arguments, when using the webpack CLI (instead write your own CLI, or use
--env) - Export non-deterministic values (calling webpack twice should result in the same output files)
- Write long configurations (instead split the configuration into multiple files)
The examples below describe how webpack's configuration can be both expressive and configurable because it is code:
Introductory Configuration
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js',
},
};See: Configuration section for all supported configuration options
Multiple Targets
Along with exporting a single configuration as an object, function or Promise, you can export multiple configurations.
See: Exporting multiple configurations
Using other Configuration Languages
webpack accepts configuration files written in multiple programming and data languages.
