Skip to content

Commit

Permalink
Update custom webpack config docs to mention existing features (#15517)
Browse files Browse the repository at this point in the history
  • Loading branch information
timneutkens authored Jul 27, 2020
1 parent 1ee1516 commit a3eec3b
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 50 deletions.
18 changes: 10 additions & 8 deletions docs/api-reference/next.config.js/custom-webpack-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@ description: Extend the default webpack config added by Next.js.

# Custom Webpack Config

Before continuing to add custom webpack configuration your application make sure Next.js doesn't already support your use-case:

- [CSS imports](/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
- [CSS modules](/docs/basic-features/built-in-css-support#adding-component-level-css)
- [Sass/SCSS imports](/docs/basic-features/built-in-css-support#sass-support)
- [Sass/SCSS modules](/docs/basic-features/built-in-css-support#sass-support)
- [preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)
- [Customizing babel configuration](/docs/advanced-features/customizing-babel-config)

Some commonly asked for features are available as plugins:

- [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)
- [@zeit/next-preact](https://github.com/zeit/next-plugins/tree/master/packages/next-preact)
- [@next/mdx](https://github.com/vercel/next.js/tree/canary/packages/next-mdx)
- [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)

Expand All @@ -20,12 +26,8 @@ module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
},
webpackDevMiddleware: (config) => {
// Perform customizations to webpack dev middleware config

// Important: return the modified config
return config
},
Expand Down
45 changes: 3 additions & 42 deletions examples/with-ant-design/next.config.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,5 @@
const compose = (plugins) => ({
webpack(config, options) {
return plugins.reduce((config, plugin) => {
if (plugin instanceof Array) {
const [_plugin, ...args] = plugin
plugin = _plugin(...args)
}
if (plugin instanceof Function) {
plugin = plugin()
}
if (plugin && plugin.webpack instanceof Function) {
return plugin.webpack(config, options)
}
return config
}, config)
},

webpackDevMiddleware(config) {
return plugins.reduce((config, plugin) => {
if (plugin instanceof Array) {
const [_plugin, ...args] = plugin
plugin = _plugin(...args)
}
if (plugin instanceof Function) {
plugin = plugin()
}
if (plugin && plugin.webpackDevMiddleware instanceof Function) {
return plugin.webpackDevMiddleware(config)
}
return config
}, config)
},
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})

const withBundleAnalyzer = require('@next/bundle-analyzer')

module.exports = compose([
[
withBundleAnalyzer,
{
enabled: process.env.ANALYZE === 'true',
},
],
])
module.exports = withBundleAnalyzer()

0 comments on commit a3eec3b

Please sign in to comment.