Webpack

In order to integrate Mosaic into a Webpack-powered project, the following steps should be performed

Install the dependencies

Using mosaic requires three packages in your Webpack-powered project - the configuration injection package, the runtime package and the helper package for linking local dependencies.

yarn

yarn add @tilework/mosaic-config-injectors @tilework/mosaic @tilework/mosaic-node-scripts

Inject the configuration

In this scenario (using own Webpack configuration), you are required to manually inject that configuration. The integration packages for Next.js and create-react-app do exactly this under the hood.

Without initial Babel

webpack.config.js

const webpack = require('webpack');
const { injectWebpackConfig } = require('@tilework/mosaic-config-injectors');

module.exports = injectWebpackConfig({
    // Your webpack configuration
    context: ...
}, {
    webpack
});

With initial Babel

You may be asked to provide additional fields to your webpack configuration, or additional options to the configuration injector itself.