Update/add razzle core dependencies
yarn add --dev \
razzle \
razzle-dev-utils \
babel-preset-razzle
... and Razzle peerDependencies
Update/add razzle peerdependencies
yarn add --dev \
webpack-dev-server@3.11.0 \
mini-css-extract-plugin@0.9.0 \
postcss@8.2.4
Choose your webpack version
yarn add --dev webpack@5.24.0 html-webpack-plugin@5.2.0
# or
yarn add --dev webpack@4.46.0 html-webpack-plugin@4.5.2
Update/add razzle plugins if you use any
yarn add --dev razzle-plugin-scss
Remove --type=spa
from scripts
{
"scripts": {
"start": "razzle start --type=spa",
"build": "razzle build --type=spa"
}
}
Add Options
//./razzle.config.js
module.exports = {
options: {
buildType: 'spa'
},
};
Update the template
Plugins are now multiple functions as opposed to one before.
E.g. change:
'use strict';
module.exports = function myRazzlePlugin(config, { target, dev }, webpack, options) {
// Do some stuff to config
return config;
};
To:
'use strict';
module.exports = {
modifyWebpackConfig({
env: {
target, // the target 'node' or 'web'
dev, // is this a development build? true or false
},
webpackConfig, // the created webpack config
webpackObject, // the imported webpack node module
options: {
pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
},
paths, // the modified paths that will be used by Razzle.
}) {
// Do some stuff to webpackConfig
return webpackConfig;
}
};
You can also make use of modifyOptions
, modifyPaths
, modifyWebpackOptions
and modifyJestConfig
.
To make plugins simpler and more composable.
Modify is now multiple functions as opposed to one before.
E.g. change:
'use strict';
// razzle.config.js
module.exports = {
modify: (config, { target, dev }, webpack) => {
// do something to config
return config;
},
};
To:
'use strict';
module.exports = {
modifyWebpackConfig({
env: {
target, // the target 'node' or 'web'
dev, // is this a development build? true or false
},
webpackConfig, // the created webpack config
webpackObject, // the imported webpack node module
options: {
razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
},
paths, // the modified paths that will be used by Razzle.
}) {
// Do some stuff to webpackConfig
return webpackConfig;
}
};
You can also make use of modifyOptions
, modifyPaths
, modifyWebpackOptions
and modifyJestConfig
.
To make extending webpack simpler.