.storybook/webpack.config.js

webpack.config.js

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js')

module.exports = (storybookBaseConfig, env) => {
  const baseConfig = genDefaultConfig(storybookBaseConfig, env)
  return Object.assign({}, baseConfig, {
    node: {
      fs: 'empty',
    },
    module: Object.assign({}, baseConfig.module, {
      rules: [
        {
          test: /\.(png|jpe?g)$/,
          query: { name: '[name].[ext]' },
          loader: 'file-loader',
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            sourceRoot: path.resolve(process.cwd(), 'node_modules'),
            presets: ['es2015', 'es2016', 'react'],
            plugins: [
              'transform-object-rest-spread',
              'transform-es2015-modules-commonjs',
            ],
          },
        },
        {
          test: /\.json$/,
          loader: 'json-loader',
        },
        {
          test: /\.woff$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 60,
                mimetype: 'application/font-woff',
                name: '[name].[ext]',
              },
            },
          ],
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 1,
                  localIdentName: '[path]_[local]_[hash:base64:5]',
                  modules: true,
                  camelCase: 'only',
                },
              },
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: [
                    require('postcss-cssnext'),
                    require('postcss-discard-duplicates'),
                    require('postcss-modules-values'),
                    require('postcss-nested'),
                    require('postcss-calc', {
                      warnWhenCannotResolve: true,
                    }),
                    require('postcss-no-important'),
                    require('postcss-functions')({
                      functions: {
                        first(list = []) {
                          const [first] = list.split(' ')
                          return first
                        },
                        last(list = []) {
                          const [last] = list.split(' ').reverse()
                          return last
                        },
                        nth(list = [], n) {
                          const items = list.split(' ')

                          const zeroBased = n - 1

                          return items[zeroBased]
                        },
                      },
                    }),
                  ],
                },
              },
            ],
          }),
        },
        {
          test: /\.svg/,
          use: [
            {
              loader: 'svg-url-loader',
            },
          ],
        },

        {
          test: /\.m(ark)?d(own)?$/,
          use: 'raw-loader',
        },
      ],
    }),
    resolve: {
      modules: ['node_modules'],
    },
    plugins: [
      ...baseConfig.plugins,
      new ExtractTextPlugin({
        filename: 'styles.[hash].css',
        disable: !(env === 'PRODUCTION'),
        allChunks: true,
        ignoreOrder: true,
      }),
    ],
  })
}