> For the complete documentation index, see [llms.txt](https://docs.mosaic.js.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mosaic.js.org/getting-started/webpack.md).

# Webpack

#### 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.

{% tabs %}
{% tab title="yarn" %}

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

{% endtab %}
{% endtabs %}

#### 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.

{% tabs %}
{% tab title="Without initial Babel" %}
{% code title="webpack.config.js" %}

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

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

{% endcode %}
{% endtab %}

{% tab title="With initial Babel" %}
{% code title="webpack.config.js" %}

```javascript
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 
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
You may be asked to provide additional fields to your webpack configuration, or additional options to the configuration injector itself.
{% endhint %}