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

webpack.config.js

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

module.exports = injectWebpackConfig({
    // Your webpack configuration
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                // Babel configuration should be injected as well!
                options: injectBabelConfig({ presets: ['@babel/preset-env'] })
            }
        }]
    },
}, { 
    webpack 
});

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