# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mosaic.js.org/getting-started/webpack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.