@atlassian/johnson/.storybook/webpack.config.js

A frontend module for Johnson framework

const paths = require('../config/paths');

module.exports = {
  resolve: {
    extensions: ['.js', '.json', '.jsx', '.less'],
    alias: {
      assets: paths.public,
    }
  },
  module: {
    rules: [
      {
        exclude: [
          /\.(html|ejs)$/,
          /\.(js|jsx)$/,
          /\.(css|less)$/,
          /\.json$/,
          /\.svg$/,
          /\.(ttf|eot|woff2?)$/,
          /\.(png|jpe?g|gif)$/
        ],
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'public/[name].[hash:8].[ext]'
          }
        }]
      },
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.src,
        use: [{
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }]
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              // importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|ttf|eot|woff2?|svg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            // limit: 1000,
            name: '[hash:8].[ext]'
          }
        }]
      },
    ],
  },
};