面试题：Webpack在新旧Node.js版本间迁移及配置调整

思路

Node.js 版本升级：Node.js v16 相比 v10 有诸多新特性与变化，需确保项目代码能在新环境下正常运行，例如可能存在语法差异、API 变动等。
Webpack 升级：Webpack 5 有显著改进，如性能优化、长期缓存等，但配置也有较大变化，需将原 Webpack 4 的配置迁移并适配到 Webpack 5。

主要配置文件修改点

package.json
- 依赖升级：将 webpack 版本从 4 升级到 5，同时可能需要升级相关的 loader、plugin 等依赖，如 @babel/core、babel-loader 等，确保与 Webpack 5 兼容。
- Node.js 版本约束：修改 engines 字段，将 Node.js 版本指定为 v16，如 "engines": {"node": "16.x"}。
webpack.config.js
- mode：Webpack 5 中 mode 默认值可能变化，需确保设置为合适的模式，如 development、production，例如：

module.exports = {
    mode: 'production'
};

- **output.chunkIds**：Webpack 5 引入了新的 `chunkIds` 策略，可优化长期缓存。若有缓存相关需求，可设置为 `deterministic` 或 `named`，如：

module.exports = {
    output: {
        chunkIds: 'deterministic'
    }
};

- **optimization.moduleIds**：类似地，`moduleIds` 也可优化长期缓存，可设置为 `deterministic`，如：

module.exports = {
    optimization: {
        moduleIds: 'deterministic'
    }
};

- **devtool**：Webpack 5 对 `devtool` 有更好的支持，可根据需求选择更合适的选项，如 `source-map`、`cheap-module-source-map` 等，例如：

module.exports = {
    devtool: 'cheap-module-source-map'
};

- **resolve.fallback**：Webpack 5 移除了对 Node.js 核心模块的内置支持，若项目依赖一些 Node.js 核心模块，需使用 `fallback` 配置项进行处理，例如：

module.exports = {
    resolve: {
        fallback: {
            "path": require.resolve('path-browserify'),
            "fs": false
        }
    }
};

babel.config.js（若使用 Babel）：确保 Babel 配置能适配 Node.js v16 和 Webpack 5。可能需要升级 Babel 版本，调整 presets 和 plugins，比如确保 @babel/preset - env 能正确识别 Node.js v16 的特性。例如：

module.exports = function (api) {
    api.cache(true);
    const presets = [
        [
            '@babel/preset - env',
            {
                targets: {
                    node: '16'
                }
            }
        ]
    ];
    const plugins = [];
    return { presets, plugins };
};

星途面试题库

面试题：Webpack在新旧Node.js版本间迁移及配置调整

知识考点

面试题答案

思路

主要配置文件修改点