d1fdd2bbf8
* Added descriptions * Added descriptions to API Reference * Added descriptions to API Routes * Added descriptions to basic features * Added descriptions to the routing docs * Update exportPathMap.md Co-authored-by: Joe Haddad <timer150@gmail.com>
67 lines
2.5 KiB
Markdown
67 lines
2.5 KiB
Markdown
---
|
|
description: Extend the default webpack config added by Next.js.
|
|
---
|
|
|
|
# Custom Webpack Config
|
|
|
|
Some commonly asked for features are available as plugins:
|
|
|
|
- [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css)
|
|
- [@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-preact](https://github.com/zeit/next-plugins/tree/master/packages/next-preact)
|
|
- [@next/mdx](https://github.com/zeit/next.js/tree/canary/packages/next-mdx)
|
|
- [@next/bundle-analyzer](https://github.com/zeit/next.js/tree/canary/packages/next-bundle-analyzer)
|
|
|
|
In order to extend our usage of `webpack`, you can define a function that extends its config inside `next.config.js`, like so:
|
|
|
|
```js
|
|
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
|
|
},
|
|
}
|
|
```
|
|
|
|
> The `webpack` function is executed twice, once for the server and once for the client. This allows you to distinguish between client and server configuration using the `isServer` property.
|
|
|
|
The second argument to the `webpack` function is an object with the following properties:
|
|
|
|
- `buildId`: `String` - The build id, used as a unique identifier between builds
|
|
- `dev`: `Boolean` - Indicates if the compilation will be done in development
|
|
- `isServer`: `Boolean` - It's `true` for server-side compilation, and `false` for client-side compilation
|
|
- `defaultLoaders`: `Object` - Default loaders used internally by Next.js:
|
|
- `babel`: `Object` - Default `babel-loader` configuration
|
|
|
|
Example usage of `defaultLoaders.babel`:
|
|
|
|
```js
|
|
// Example config for adding a loader that depends on babel-loader
|
|
// This source was taken from the @next/mdx plugin source:
|
|
// https://github.com/zeit/next.js/tree/canary/packages/next-mdx
|
|
module.exports = {
|
|
webpack: (config, options) => {
|
|
config.module.rules.push({
|
|
test: /\.mdx/,
|
|
use: [
|
|
options.defaultLoaders.babel,
|
|
{
|
|
loader: '@mdx-js/loader',
|
|
options: pluginOptions.options,
|
|
},
|
|
],
|
|
})
|
|
|
|
return config
|
|
},
|
|
}
|
|
```
|