Release Notes / Third-Party Update: Webpack 4 and Babel 7

Release Notes / Version 10.2107

Third-Party Update: Webpack 4 and Babel 7

Webpack and Babel has been updated to version 4 and 7 respectively.

Support For Webpack `mode`

Building themes will generate production versions of the the theme by default. It's not necessary anymore to set the NODE_ENV ( yarn run --production build ).

For the production build, just run yarn build .
For the development build use yarn build --mode=development .

Support for `babel.config.js`

You can now add a babel.config.js to theme's root folder to customize the babel configuration:

const { babelConfig } = require("@coremedia/theme-utils");

module.exports = api => {
  const config = babelConfig(api);

  // ... your customizations

  return config;
};

Upgrade Steps

Adjust your theme's `package.json`

You just need to make sure that the webpack version in your theme's package.json now needs to be "^4.0.0".

Importing Our Default Webpack Configuration

The webpack configuration is now a named export instead of the default export meaning that the code in your webpack.config.js needs a slight adjustment.

const webpackTheme = require("@coremedia/theme-utils");

module.exports = webpackTheme;

To:

const { webpackConfig } = require("@coremedia/theme-utils");

module.exports = webpackConfig;

(Optional) If you have made customizations to the `webpack.config.js`

The webpack mode can only be accessed using the function based webpack configuration (see https://webpack.js.org/configuration/configuration-types#exporting-a-function ). As we were using the object approach our default webpack configuration provided by the package @coremedia/theme-utils has been changed and now provides a function instead of an object. Changes to our default configuration should be made as follows:

const { webpackConfig } = require("@coremedia/theme-utils");

module.exports = (env, argv) => {
  const config = webpackConfig(env, argv);

  // ... your customizations

  return config;
};

Please also consult https://webpack.js.org/migrate/4/ for webpack specific upgrade hints or https://babeljs.io/docs/en/v7-migration to see what changed with the babel upgrade.

(Optional) If you maintain a list of JavaScript files associated to a theme

For technical reasons we needed to introduce a commons.js file. If you have manually created a list of JavaScript files to be loaded you also need to add this new file. It needs to be loaded before all other JavaScript files.

(CMS-11711)

Search Results

Table Of Contents

Filter