angular 项目改用 esbuild 后如何迁移 extra-webpack.config.js

小能豆

angular 项目改用 esbuild 后如何迁移 extra-webpack.config.js

angula

升级到 angular 17 后准备使用 esbuild，切换到 esbuild 很简单，只需在 angular.json 中将

"builder": "@angular-builders/custom-webpack:browser"

替换为

"builder": "@angular-devkit/build-angular:browser-esbuild"

另外需要删除下面 webpack 配置

"customWebpackConfig": {
    "path": "./extra-webpack.config.js",
    "replaceDuplicatePlugins": true,
    "mergeRules": {
        "module": {
            "rules": "prepend"
        }
    }
}

但 extra-webpack.config.js 中配置需要迁移到 esbuild，请问如何迁移？

webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            APPVERSION: JSON.stringify('20230823'),
        }),
    ],
    module: {
        rules: [
            {
                test: /tinymce5\.skin\.(le|c)ss$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
            },
            {
                test: /tinymce5\.content\.(le|c)ss$/i,
                use: ['css-loader', 'postcss-loader', 'less-loader'],
            },
        ],
    },
    devServer: {
        client: {
            logging: 'verbose',
        },
        onListening: function ({ options: { proxy }, compiler }) {
            console.info(
                '\x1b[32m',
                '\nUsing proxy.conf:\n' + JSON.stringify(proxy, undefined, 2),
                '\x1b[0m'
            );
        },
    },
};

阅读 101

2024-06-02

共1个答案

小能豆

迁移 webpack 配置到 esbuild 需要了解 esbuild 的配置方式和支持的特性。esbuild 是一个快速、轻量级的 JavaScript 打包工具，其配置方式与 webpack 有所不同。

以下是将您提供的 webpack 配置迁移到 esbuild 的示例：

const esbuild = require('esbuild');
const path = require('path');

esbuild.build({
  entryPoints: ['./src/index.js'], // 入口文件路径
  bundle: true, // 是否打包成一个文件
  minify: true, // 是否压缩代码
  outdir: './dist', // 输出目录
  define: {
    APPVERSION: '"20230823"', // 定义常量
  },
  loader: {
    '.less': 'file', // 将 less 文件转换为文件路径
  },
  plugins: [], // 插件配置
}).catch(() => process.exit(1));

上述示例中，我们使用了 esbuild 的 build 方法来构建项目。您需要根据实际情况修改入口文件路径、输出目录等参数。以下是对比说明：

entryPoints: 设置入口文件路径，可以是单个文件或者多个文件的数组。
bundle: 是否将所有模块打包成一个文件。
minify: 是否压缩代码。
outdir: 输出目录。
define: 定义常量，类似于 webpack 中的 DefinePlugin。
loader: 设置文件加载器，这里使用了 esbuild 默认的文件加载器。
plugins: 插件配置，您可以根据需要添加额外的插件。

需要注意的是，esbuild 不支持直接在配置中编写复杂的逻辑，比如 devServer 配置中的 onListening 回调函数。如果您需要类似的功能，可能需要自行编写代码来实现。

迁移完成后，您可以根据需要执行构建命令来生成您的应用程序代码。

以上是一个简单的迁移示例，您可以根据您的项目实际情况进行调整和修改。如果您需要更多帮助或有其他问题，请随时提问。

2024-06-02