Webpack Config

Last updated 2 months ago

Webpack configurations are a significant part of the component archetype. They help with compiling and bundling your React component code. Below is the component configuration used with webpack:

- webpack.config.coverage.js: When running coverage test
- webpack.config.js: When building your app for production
- webpack.config.test.js: When running tests

Migrate to Webpack v2

In order to keep pace with the latest trend, our new component archetype also finished migration from webpack v1 to webpack v2. Webpack 2 offers better performance, improved bundling, and a much nicer experience when configuring it. For information about migrating to webpack v2, see the webpack migration documentation.

Webpack-config-composer

The webpack configurations in the component archetype are separated into partials and compose into a single configuration using webpack-config-composer that's passed to webpack.

We use webpack-config-composer to compose webpack configuration partials in the /partial directory. Under the component configuration (to use with webpack above), we add partials and profiles to the composer, and then selectively compose them into a single configuration object for webpack.

Below are the partial configurations for a new component archetype webpack structure:

|- electrode-archetype-react-component/config/webpack
| |- partial
| | |- babel.js
| | |- define.js
| | |- fonts.js
| | |- images.js
| | |- json.js
| | |- optimize.js
| | |- sourcemaps.js
| | |- styles.js

After understanding the new Component Archetype Structure, it's time to generate Electrode components by using the latest Electrode generators. With generator-electrode, we can create dynamic and performant Lerna-structured Electrode components. Let's explore and personalize this in our next section, Create an Electrode Component.‚Äč