如何將此處提到的以下配置添加到單水療中心生成的 webpack 組態檔中extra-webpack.config.js？
import linkerPlugin from '@angular/compiler-cli/linker/babel'; export default { // ... module: { rules: [ { test: /\.m?js$/, use: { loader: 'babel-loader', options: { plugins: [linkerPlugin], compact: false, cacheDirectory: true, } } } ] } // ... }
//extra-webpack.config.js（注意格式的不同）
const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default; module.exports = (config, options) => { const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options); // Feel free to modify this webpack config however you'd like to~ singleSpaWebpackConfig.externals.push( ); return singleSpaWebpackConfig; };
我為什么要嘗試這個：與其他有角度的微型應用程式angular library在框架中共享 UI 組件。single-spa該庫將通過systemjs-importmapsingle-spa 中記錄的方式加載一次。如果有用，這是庫的 anuglar.json 檔案的片段
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist",
"index": "projects/my-lib/src/index.html",
"main": "projects/my-lib/src/main.single-spa.ts",
"customWebpackConfig": {
"path": "projects/my-lib/extra-webpack.config.js",
"libraryName": "@myOrg/my-lib",
"libraryTarget": "system",
"excludeAngularDependencies": true
},
"deployUrl": "http://localhost:4304/"
},
"configurations": {
"production": {
"tsConfig": "projects/my-lib/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/my-lib/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
謝謝
uj5u.com熱心網友回復：
我想出了辦法。雖然沒有解決我問題的初衷，但這里的問題得到了回答。
import pckg from 'single-spa-angular/lib/webpack';
import pckg1 from 'webpack-merge';
import linkerPlugin from '@angular/compiler-cli/linker/babel';
export default function (config, options) {
const singleSpaWebpackConfig = pckg.default(config, options);
return pckg1.default(singleSpaWebpackConfig, {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
plugins: [linkerPlugin],
compact: false,
cacheDirectory: true,
}
}
}
]
}
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/537952.html