M2A_64.md

M2#A64 - Abstraindo configuração padrão do webpack - parte 3

Corrigindo erro

Nós estavamos utilizando o arquivo final errado no construtor new HtmlPlugin ao invés de template.html deve ser template-dev.html. O anterior utilizava plugins que não estamos utilizando nessa versão.

...
plugins: [
    new ExtractTextPlugin('[name]-[hash].css'),

    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    }),

    new HtmlPlugin(common.htmlPluginConfig('template.html')),
...

Configurando webpack.config do storybook

Linkamos a configuracão padrão nossa

const common = require('../webpack/common')

Aplicando configuracão do standard para o loaderJS

Antes

 newConfig.module.preLoaders = (newConfig.module.preLoaders || []).concat({
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'standard'
  })

Depois

module.exports = function (config, env) {
  const newConfig = webpackConfig(config, env)
  newConfig.module.preLoaders = (newConfig.module.preLoaders || []).concat(common.jsLoader)
  return newConfig
}

Atribuindo o utils ao arquivo common

Foi feito isso para conseguirmos mapear o diretório utils no storybook

 resolve: {
    alias: {
      src: path.join(__dirname, '..', 'src'),
      components: path.join(__dirname, '..', 'src', 'components'),
      utils: path.join(__dirname, '..', 'src', 'utils')
    }
  }

Arquivo final webpack.config do storybook

const path = require('path')
const common = require('../webpack/common') // chamamos aqui o arquivo
const webpackConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js')

module.exports = function (config, env) {
  const newConfig = webpackConfig(config, env)
  newConfig.module.preLoaders = (newConfig.module.preLoaders || []).concat(common.jsLoader)
  newConfig.resolve = common.resolve
  return newConfig
}