<commit_before>---
id: tutorial-webpack
title: Tutorial – webpack
layout: docs
category: Quick Start
permalink: docs/tutorial-webpack.html
next: tutorial-jquery
---

Jest can be used in projects that use webpack to manage assets, styles, and compilation.
webpack _does_ offer some unique challenges over other tools because it
integrates directly with your application to allow managing stylesheets,
assets like images and fonts, along with the expansive ecosystem of compile-to-JavaScript
languages and tools.

Let's start with a common sort of webpack config file and translate it to a Jest setup.

```js
// webpack.config.js
{
  module: {
    loaders: [
      { test: /\\.jsx?$/, loader: 'babel', exclude: ['node_modules'] },
      { test: /\\.css$/,  loader: "style-loader!css-loader" },
      { test: /\\.gif$/, loader: "url-loader" },
      { test: /\\.(ttf|eot|svg)$/, loader: "file-loader" },
    ]
  },
  resolve: {
    extensions: ['', 'js', 'jsx'],
    modulesDirectories: ['node_modules', 'bower_components', 'shared']
    root: '/shared/vendor/modules',
    alias: {
      react: './vendor/react-master',
      config$: './configs/app-config.js',
    },
  }
}
```

For JavaScript files that are transformed by Babel, installing `babel-jest`
will teach Jest to pick up your `.babelrc` config automatically. Non-Babel
JavaScript transformations can be handled with the Jest `scriptPreprocessor` option.

Next let's configure Jest to gracefully handle asset files such as stylesheets and images.
Usually these files aren't particularly useful in tests so we can safely mock them out.
However, if you are using CSS Modules then it's better to mock a proxy for your className lookups.<commit_msg>Fix webpack config (#1880)<commit_after>---
id: tutorial-webpack
title: Tutorial – webpack
layout: docs
category: Quick Start
permalink: docs/tutorial-webpack.html
next: tutorial-jquery
---

Jest can be used in projects that use webpack to manage assets, styles, and compilation.
webpack _does_ offer some unique challenges over other tools because it
integrates directly with your application to allow managing stylesheets,
assets like images and fonts, along with the expansive ecosystem of compile-to-JavaScript
languages and tools.

Let's start with a common sort of webpack config file and translate it to a Jest setup.

```js
// webpack.config.js
module.exports = {
  module: {
    loaders: [
      { test: /\\.jsx?$/, loader: 'babel', exclude: ['node_modules'] },
      { test: /\\.css$/,  loader: "style-loader!css-loader" },
      { test: /\\.gif$/, loader: "url-loader" },
      { test: /\\.(ttf|eot|svg)$/, loader: "file-loader" },
    ]
  },
  resolve: {
    extensions: ['', 'js', 'jsx'],
    modulesDirectories: ['node_modules', 'bower_components', 'shared'],
    root: '/shared/vendor/modules',
    alias: {
      react: './vendor/react-master',
      config$: './configs/app-config.js',
    },
  }
}
```

For JavaScript files that are transformed by Babel, installing `babel-jest`
will teach Jest to pick up your `.babelrc` config automatically. Non-Babel
JavaScript transformations can be handled with the Jest `scriptPreprocessor` option.

Next let's configure Jest to gracefully handle asset files such as stylesheets and images.
Usually these files aren't particularly useful in tests so we can safely mock them out.
However, if you are using CSS Modules then it's better to mock a proxy for your className lookups.
{'fraction_non_alphanumeric': 0.1157313172433847, 'fraction_numerical': 0.0011631288165164292, 'mean_word_length': 3.718792866941015, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1644951', 'n_tokens_mistral': 1022, 'n_tokens_neox': 973, 'n_words': 399}