从 3.x 升级到 4.x 的指南

依赖项#

更新/添加 razzle 核心依赖项

yarn add --dev \
  razzle \
  razzle-dev-utils \
  babel-preset-razzle

... 以及 Razzle peerDependencies

更新/添加 razzle peerdependencies

yarn add --dev \
  webpack-dev-server@3.11.0 \
  mini-css-extract-plugin@0.9.0 \
  postcss@8.2.4

选择你的 webpack 版本

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

如果你使用任何 razzle 插件的话，请更新/添加它们

yarn add --dev razzle-plugin-scss

Spa 应用程序#

从脚本中移除 --type=spa

{
  "scripts": {
    "start": "razzle start --type=spa",
    "build": "razzle build --type=spa"
  }
}

添加选项

//./razzle.config.js
module.exports = {
  options: {
    buildType: 'spa'
  },
};

更新模板

插件#

插件现在是多重函数，与之前的单一函数相反。

例：更改

'use strict';
module.exports = function myRazzlePlugin(config, { target, dev }, webpack, options) {
  // Do some stuff to config
  return config;
};

至

'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;
  }
};

你还可以使用 modifyOptions、modifyPaths、modifyWebpackOptions 和 modifyJestConfig。

使插件更简单、更具可组合性。

扩展 Webpack#

Modify 现在是多重函数，与之前的单一函数相反。

例：更改

'use strict';
// razzle.config.js
module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // do something to config
    return config;
  },
};

至

'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;
  }
};

你还可以使用 modifyOptions、modifyPaths、modifyWebpackOptions 和 modifyJestConfig。

简化扩展 webpack。