angular 项目改用 esbuild 后如何迁移 extra-webpack.config.js
0
悬赏园豆：30
[待解决问题]
升级到 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'
);
},
},
};
所有回答(1)
0
迁移 extra-webpack.config.js 中的配置到 esbuild 需要一些工作，因为 esbuild 和 webpack 在插件系统和配置方式上有显著的差异。下面是针对你的具体配置的迁移步骤和示例代码。
-
Define Plugin
webpack.DefinePlugin 可以使用 esbuild 的 define 选项来替代。 -
Module Rules
对于加载样式文件（如 less 和 css），需要用到 esbuild 的插件。常见的插件有 esbuild-plugin-less 和 esbuild-plugin-postcss2 等。 -
Dev Server
esbuild 没有内置的 dev server，但可以使用 vite 或者其他类似的工具来实现相同的功能。
迁移示例代码
下面是一个完整的示例，展示如何迁移上述配置：
js
Copy code
import { defineConfig } from 'vite';
import esbuildDefinePlugin from 'vite-plugin-esbuild-define';
import esbuildLess from 'esbuild-plugin-less';
import postcss from 'vite-plugin-postcss';
import proxy from './proxy.conf.js'; // 假设你的 proxy 配置在这个文件中
export default defineConfig({
plugins: [
esbuildDefinePlugin({
APPVERSION: JSON.stringify('20230823'),
}),
esbuildLess(),
postcss({
plugins: [
require('autoprefixer'),
require('postcss-preset-env'),
],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
server: {
proxy,
open: true,
port: 4200,
logLevel: 'info',
onListening(server) {
console.info(
'\x1b[32m',
'\nUsing proxy.conf:\n' + JSON.stringify(server.config.proxy, undefined, 2),
'\x1b[0m'
);
},
},
});
详细步骤说明
安装必要的插件
你需要安装一些插件来支持 esbuild 的配置。以下是一些可能用到的插件：
bash
Copy code
npm install vite vite-plugin-esbuild-define esbuild-plugin-less vite-plugin-postcss autoprefixer postcss-preset-env
创建 Vite 配置文件
在项目根目录下创建一个 vite.config.js 文件，并添加上面的配置。
更新 angular.json
确保 angular.json 中使用的 builder 是 @angular-devkit/build-angular:browser-esbuild。
设置样式文件的处理
你需要确保所有样式文件（如 less 和 css）都能被正确处理。vite-plugin-postcss 和 esbuild-plugin-less 可以帮助处理这些文件。
迁移思路
DefinePlugin 被替换为 esbuildDefinePlugin。
模块规则 使用 esbuildLess 和 postcss 插件来处理样式文件。
Dev Server 的配置需要通过 Vite 的 server 配置项来实现。
通过这些步骤，你可以将现有的 webpack 配置迁移到 esbuild，同时利用 Vite 提供的 dev server 功能。如果有更多的自定义需求，可以根据具体情况进一步调整 Vite 配置。
Angular ESBuild Configuration (e.g. --define)
– dudu 8个月前How to configure CSS and CSS modules in webpack
– dudu 8个月前Angular esbuild ckeditor. No loader is configured for ".svg"
– dudu 8个月前