How to use @sanity/webpack-integration - 9 common examples

}

    const partPath = parts.implementations[partName][0]
    return require.resolve(partPath)
  }

  // Register CSS hook
  if (options.stubCss) {
    require.extensions['.css'] = function stubCssHook(mod, filename) {
      return mod._compile(`module.exports = {} `, filename)
    }
  } else {
    const postcss = require('@sanity/webpack-integration/v3')
    cssHook({
      generateScopedName: options.generateScopedName || '[name]__[local]___[hash:base64:5]',
      prepend: postcss
        .getPostcssPlugins({basePath: basePath})
        .filter(plugin => plugin.postcssPlugin !== 'postcss-import')
    })
  }
}

function getWebpackConfig(baseConfig, env) {
  /* eslint-disable strict */

  'use strict'

  if (!sanityContext) {
    throw new Error('Sanity context has not been set for Storybook!')
  }

  const wpConfig = Object.assign({}, sanityContext, {commonChunkPlugin: false})
  const sanityWpConfig = sanityServer.getWebpackDevConfig(wpConfig)
  const config = Object.assign({}, genDefaultConfig(baseConfig, env))
  const context = Object.assign({}, sanityContext, {webpack})
  config.plugins = config.plugins.concat(wpIntegration.getPlugins(context))
  config.module.rules = (config.module.rules || []).concat(wpIntegration.getLoaders(context))
  config.module.rules = config.module.rules.filter(skipCssLoader)
  config.module.rules.unshift(sanityWpConfig.module.rules.find(isCssLoader))

  const jsonLoaderAt = config.module.rules.findIndex(rule =>
    (rule.loader || '').includes('json-loader')
  )

  const jsonHackLoader = {
    test: /\.json$/,
    resourceQuery: /sanityPart=/,
    loader: require.resolve('./jsonHackLoader.js')
  }

  if (jsonLoaderAt !== -1) {
    config.module.rules.splice(jsonLoaderAt + 1, 0, jsonHackLoader)
  }

function getWebpackConfig(baseConfig, env) {
  /* eslint-disable strict */

  'use strict'

  if (!sanityContext) {
    throw new Error('Sanity context has not been set for Storybook!')
  }

  const wpConfig = Object.assign({}, sanityContext, {commonChunkPlugin: false})
  const sanityWpConfig = sanityServer.getWebpackDevConfig(wpConfig)
  const config = Object.assign({}, genDefaultConfig(baseConfig, env))
  const context = Object.assign({}, sanityContext, {webpack})
  config.plugins = config.plugins.concat(wpIntegration.getPlugins(context))
  config.module.rules = (config.module.rules || []).concat(wpIntegration.getLoaders(context))
  config.module.rules = config.module.rules.filter(skipCssLoader)
  config.module.rules.unshift(sanityWpConfig.module.rules.find(isCssLoader))

  const jsonLoaderAt = config.module.rules.findIndex(rule =>
    (rule.loader || '').includes('json-loader')
  )

  const jsonHackLoader = {
    test: /\.json$/,
    resourceQuery: /sanityPart=/,
    loader: require.resolve('./jsonHackLoader.js')
  }

  if (jsonLoaderAt !== -1) {
    config.module.rules.splice(jsonLoaderAt + 1, 0, jsonHackLoader)

const resolveProjectRoot = require('@sanity/resolver').resolveProjectRoot
const webpackIntegration = require('@sanity/webpack-integration/v3')

module.exports = {
  plugins: webpackIntegration.getPostcssPlugins({
    basePath: resolveProjectRoot({sync: true}),
    cssnext: {
      features: {
        customProperties: true
      }
    }
  })
}

export default options => {
  return webpackIntegration.getPostcssPlugins(options)
}

}
          ]
        },
        {
          test: /\.(jpe?g|png|gif|svg|webp|woff|woff2|ttf|eot|otf)$/,
          use: {
            loader: resolve('file-loader'),
            options: {name: 'assets/[name]-[hash].[ext]'}
          }
        },
        webpackIntegration.getPartLoader(wpIntegrationOptions)
      ]
    },
    profile: config.profile || false,
    plugins: [
      webpackIntegration.getEnvPlugin(wpIntegrationOptions),
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|nb/),
      webpackIntegration.getPartResolverPlugin(wpIntegrationOptions),
      cssExtractor,
      commonChunkPlugin
    ].filter(Boolean)
  }
}

},
            {
              use: isProd
                ? ExtractTextPlugin.extract({use: [cssLoader, postcssLoader]})
                : [resolve('style-loader'), cssLoader, postcssLoader]
            }
          ]
        },
        {
          test: /\.(jpe?g|png|gif|svg|webp|woff|woff2|ttf|eot|otf)$/,
          use: {
            loader: resolve('file-loader'),
            options: {name: 'assets/[name]-[hash].[ext]'}
          }
        },
        webpackIntegration.getPartLoader(wpIntegrationOptions)
      ]
    },
    profile: config.profile || false,
    plugins: [
      webpackIntegration.getEnvPlugin(wpIntegrationOptions),
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|nb/),
      webpackIntegration.getPartResolverPlugin(wpIntegrationOptions),
      cssExtractor,
      commonChunkPlugin
    ].filter(Boolean)
  }
}

},
        {
          test: /\.(jpe?g|png|gif|svg|webp|woff|woff2|ttf|eot|otf)$/,
          use: {
            loader: resolve('file-loader'),
            options: {name: 'assets/[name]-[hash].[ext]'}
          }
        },
        webpackIntegration.getPartLoader(wpIntegrationOptions)
      ]
    },
    profile: config.profile || false,
    plugins: [
      webpackIntegration.getEnvPlugin(wpIntegrationOptions),
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en|nb/),
      webpackIntegration.getPartResolverPlugin(wpIntegrationOptions),
      cssExtractor,
      commonChunkPlugin
    ].filter(Boolean)
  }
}

const compilationConfig = {
    env: 'production',
    staticPath: resolveStaticPath(workDir, config.get('server')),
    basePath: workDir,
    outputPath: path.join(outputDir, 'static'),
    sourceMaps: flags['source-maps'],
    skipMinify: !flags.minify,
    profile: flags.profile,
    project: Object.assign({}, config.get('project'), overrides.project)
  }

  await tryInitializePluginConfigs({workDir, output, env: 'production'})

  checkStudioDependencyVersions(workDir)

  const envVars = webpackIntegration.getSanityEnvVars({env: 'production', basePath: workDir})
  const envVarKeys = Object.keys(envVars)
  if (envVarKeys.length > 0) {
    output.print(
      '\nIncluding the following environment variables as part of the JavaScript bundle:'
    )
    envVarKeys.forEach(key => output.print(`- ${key}`))
    output.print('')
  }

  const compiler = getWebpackCompiler(compilationConfig)
  const compile = promisify(compiler.run.bind(compiler))
  let shouldDelete = true

  if (outputDir !== defaultOutputDir && !unattendedMode) {
    shouldDelete = await prompt.single({
      type: 'confirm',