Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to share a webpack config between next.js and Storybook
// next.config.js
// extension of next.js' webpack config, per:
// https://github.com/zeit/next.js/#customizing-webpack-config
// This file is not going through babel transformation.
// So, we write it in vanilla JS
// (But you could use ES2015 features supported by your Node.js version)
// Current config is to support a Global Stylesheet, per
// https://github.com/zeit/next.js/blob/v3-beta/examples/with-global-stylesheet/next.config.js
// The actual loaders live in ./webpack-extensions.js
// so that they can be shared with .storybook/webpack.config.js
const path = require('path')
const glob = require('glob')
const extensionRules = require('./webpack-extensions')
module.exports = {
webpack: (config, { dev }) => {
// any next.js specific rules can be pushed in here
// NOTE: ORDER matters
// the emit-file-loader must be pushed before the rules in webpack-extension.js are pushed
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]'
}
}
)
// each rule in the shared webpack-extension.js will be pulled in here
extensionRules.forEach(
(rule) => config.module.rules.push(rule)
)
return config
}
}
//webpack-extension.js
// extends rules for:
// next.config.js
// .storybook/webpack.config.js
const path = require('path')
const glob = require('glob')
module.exports = [
{
test: /\.css$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader']
}
,
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader',
{ loader: 'sass-loader',
options: {
includePaths: ['styles/*', 'node_modules']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
}
]
}
]
// .storybook/webpack.config.js
// extension of storybook's webpack config, per:
// https://storybook.js.org/configurations/custom-webpack-config/#extend-mode
const path = require('path')
const glob = require('glob')
const extensionRules = require('../webpack-extensions')
module.exports = {
module: {
rules: extensionRules
}
}
@jorge-autogravity

This comment has been minimized.

Copy link

jorge-autogravity commented Oct 17, 2017

The file name webpack-extension.js is missing an 's'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment