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'
);
},
},
};
问题补充：
对应的 tinymce.styles.ts 文件
import './tinymce5.skin.less';
// @ts-ignore
import _contentStyle from './tinymce5.content.less';
export const contentStyle = _contentStyle as string;
上面的 webpack 的 style-loader 是通过这个开源项目实现的 https://github.com/webpack-contrib/style-loader
对应 import './tinymce5.skin.less'，lessLoader 会将 tinymce5.skin.less build 成 tinymce5.styles-SAZGTJID.css，但不会添加这个 css 文件的引用
所有回答(1)
0
对于
import _contentStyle from './tinymce5.content.less';`
可以通过 esbuild-plugin-less 的 lessLoader 解决，详见 https://q.cnblogs.com/q/151668
Angular ESBuild Configuration (e.g. --define)
– dudu 1年前How to configure CSS and CSS modules in webpack
– dudu 1年前Angular esbuild ckeditor. No loader is configured for ".svg"
– dudu 1年前How to make css inject in javaScript
– dudu 8个月前