Skip to content

Commit d718a97

Browse files
mor10mkaz
authored andcommitted
Add info on how to extend webpack.config.js (#14590)
* Add info on how to extend webpack.config.js See #14560. Adds explanation and code example for how to extend `webpack.config.js` using `spread` operator. * Update packages/scripts/README.md Co-Authored-By: mor10 <morten@pinkandyellow.com>
1 parent bd381c4 commit d718a97

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

packages/scripts/README.md

+24
Original file line numberDiff line numberDiff line change
@@ -287,4 +287,28 @@ Should there be any situation where you want to provide your own webpack config,
287287
* the command receives a `--config` argument. Example: `wp-scripts build --config my-own-webpack-config.js`.
288288
* there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your package (at the same level than your `package.json`).
289289

290+
##### Extending the webpack config
291+
292+
To extend the provided webpack config, or replace subsections within the provided webpack config, you can provide your own `webpack.config.js` file, `require` the provided `webpack.config.js` file, and use the [`spread` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to import all of or part of the provided configuration.
293+
294+
In the example below, a `webpack.config.js` file is added to the root folder extending the provided webpack config to include [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) and [`url-loader`](https://github.com/webpack-contrib/url-loader):
295+
296+
```javascript
297+
const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");
298+
299+
module.exports = {
300+
...defaultConfig,
301+
module: {
302+
...defaultConfig.module,
303+
rules: [
304+
...defaultConfig.module.rules,
305+
{
306+
test: /\.svg$/,
307+
use: ["@svgr/webpack", "url-loader"]
308+
}
309+
]
310+
}
311+
};
312+
```
313+
If you follow this approach, please, be aware that future versions of this package may change what webpack and Babel plugins we bundle, default configs, etc. Should those changes be necessary, they will be registered in the [package's CHANGELOG](https://github.com/WordPress/gutenberg/blob/master/packages/scripts/CHANGELOG.md), so make sure to read it before upgrading.
290314
<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

0 commit comments

Comments
 (0)