我从以前的开发人员那里继承了这个项目，并使用官方网站的提示将其更新为 12 角度，但是 svg sprite 的组装存在问题。我在下面附上了自定义的 webpack 配置和 package.json，感谢您的帮助！
自定义 webpack.config.js
const webpack = require('webpack');
const path = require('path');
const SvgSpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const url = require('postcss-url');
const urlPlugin = url([{ filter: '**/assets/calltrace/*.svg', url: 'inline' }]);
const sprites = {
calltrace: path.resolve(__dirname, 'src/assets/calltrace'),
reports: path.resolve(__dirname, 'src/assets/reports')
};
const keyPrefix = 'INSIGHT_';
const keys = Object.keys(process.env).filter(key => key.startsWith(keyPrefix));
const env = {};
keys.forEach(key => (env[key] = JSON.stringify(process.env[key])));
console.log('env=', env);
/**
* Entry point for custom webpack configuration.
*
* @angular-builders/custom-webpack passes the Angular CLI prepared
* webpack config, which we can customize here.
*
*/
function customizeWebpackConfig(config, _) {
excludeIconsFromModuleRulesForSvg(config);
addModuleRuleForIconSprite(config);
addPluginForIconSprite(config);
addPluginForEnvVariables(config);
addPostCSSUrlPlugin(config);
addHTMLPluginForExports(config);
return config;
}
function excludeIconsFromModuleRulesForSvg(config) {
config.module.rules.forEach(rule => {
if (!rule.test.toString().includes('svg')) return;
excludeIconsFromModuleRule(rule);
});
}
function excludeIconsFromModuleRule(rule) {
if (!rule.exclude) {
rule.exclude = Object.values(sprites);
return;
}
if (rule.exclude instanceof Array) {
rule.exclude.concat(Object.values(sprites));
return;
}
rule.exclude = [rule.exclude, ...Object.values(sprites)];
}
function addModuleRuleForIconSprite(config) {
config.module.rules.push({
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: Object.values(sprites),
options: {
esModule: false,
extract: true,
spriteFilename: `module-sprites.svg`,
publicPath: '/',
symbolId: '[name]'
}
});
}
function addPluginForIconSprite(config) {
config.plugins.push(new SvgSpriteLoaderPlugin({ plainSprite: true }));
}
function addPluginForEnvVariables(config) {
config.plugins.push(new webpack.DefinePlugin({ ENV_VARS: env }));
}
function addPostCSSUrlPlugin(config) {
for (const rule of config.module.rules) {
const loader = Array.isArray(rule.use) && rule.use.find(x => x.loader && x.loader.includes('postcss-loader'));
if (loader) {
loader.options.plugins = [urlPlugin];
}
}
}
function addHTMLPluginForExports(config) {
config.entry.calltrace = [__dirname + '/src/app/calltrace/calltrace.module.ts'];
config.plugins.push(
new HtmlWebpackPlugin({
filename: 'export.html',
template: './export-template.ejs',
inlineSource: '.(js|css)$',
chunks: ['runtime', 'polyfills', 'styles', 'vendor', 'calltrace', 'main'],
chunksSortMode: 'manual'
})
);
config.plugins.push(new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin));
}
module.exports = customizeWebpackConfig;
包.json
{
"name": "insight",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "concurrently --kill-others --names client,server,ws \"ng serve\" \"nodemon ./server.js\" \"nodemon ./server/ws-server.js\"",
"start:prod": "npm run build:prod && npm run server",
"build": "ng build",
"build:prod": "ng build --configuration production",
"lint": "ng lint",
"test": "ng lint && ng test --configuration=test",
"watch": "ng test --configuration=test --browsers ChromeHeadless --watch --reporters dots",
"e2e": "ng e2e",
"ci": "npm run format:test && ng lint && ng test --configuration=test --browsers ChromeTravisCi --code-coverage && npm run e2e && npm run build:prod",
"format:write": "prettier **/*.{ts,json,md,scss} --write",
"format:test": "prettier **/*.{ts,json,md,scss} --list-different",
"release": "standard-version && git push --follow-tags origin master",
"analyze": "npm run build:prod -- --stats-json && webpack-bundle-analyzer ./dist/stats.json",
"server": "concurrently --kill-others --names server,websocket-server \"nodemon ./server.js\" \"nodemon ./server/ws-server.js\"",
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
"custom": "cross-env INSIGHT_SERVER=http://bigdata-mediation07.msk.mts.ru INSIGHT_WS=ws://bigdata-mediation07.msk.mts.ru npm run build:prod"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
},
"private": true,
"dependencies": {
"@amcharts/amcharts4": "^4.10.22",
"@amcharts/amcharts4-geodata": "^4.1.22",
"@angular-extensions/elements": "^12.6.0",
"@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.8",
"@angular/cdk-experimental": "^12.2.8",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/elements": "^12.2.7",
"@angular/flex-layout": "^9.0.0-beta.31",
"@angular/forms": "~12.2.0",
"@angular/localize": "^12.2.7",
"@angular/material": "^12.2.8",
"@angular/material-moment-adapter": "^12.2.8",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@mts/daterangepicker": "^9.5.0",
"@mts/login": "^0.2.3",
"@ngrx/effects": "^12.4.0",
"@ngrx/entity": "^12.4.0",
"@ngrx/router-store": "^12.4.0",
"@ngrx/schematics": "^12.4.0",
"@ngrx/store": "^12.4.0",
"@ngrx/store-devtools": "^12.4.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"angular-split": "^5.0.0",
"bmt": "^0.1.1",
"bootstrap": "^5.1.1",
"browser-detect": "^0.2.28",
"date-fns": "^2.25.0",
"date-fns-tz": "^1.1.6",
"document-register-element": "^1.14.10",
"fast-memoize": "^2.5.2",
"file-saver": "^2.0.5",
"fontfaceobserver": "^2.1.0",
"jasmine-marbles": "^0.8.4",
"lodash": "^4.17.21",
"mark.js": "^8.11.1",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
"moment-timezone": "^0.5.33",
"ng-click-outside": "^9.0.0",
"ngx-bootstrap": "^7.1.0",
"ngx-mask": "^12.0.0",
"ngx-perfect-scrollbar": "^10.1.1",
"ngx-scrollbar": "^8.0.0",
"resize-observer-polyfill": "^1.5.1",
"rxjs": "~6.6.0",
"rxjs-tslint-rules": "^4.34.8",
"tslib": "^2.3.0",
"xhr-mock": "^2.5.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^12.1.2",
"@angular-devkit/build-angular": "~12.2.7",
"@angular/cli": "~12.2.7",
"@angular/compiler-cli": "~12.2.0",
"@angular/language-service": "~12.2.7",
"@commitlint/cli": "^13.2.0",
"@commitlint/config-conventional": "^13.2.0",
"@mts/tslint": "^2.0.2",
"@types/express": "^4.17.13",
"@types/jasmine": "~3.8.0",
"@types/jasminewd2": "^2.0.10",
"@types/lodash": "^4.14.175",
"@types/moment-duration-format": "^2.2.3",
"@types/node": "^12.11.1",
"@types/uuid": "^8.3.1",
"@types/ws": "^8.2.0",
"body-parser": "^1.19.0",
"codelyzer": "^6.0.0",
"compression": "^1.7.4",
"concurrently": "^6.3.0",
"cors": "^2.8.5",
"cross-env": "^7.0.3",
"express": "^4.16.4",
"html-webpack-inline-source-plugin": "1.0.0-beta.2",
"html-webpack-plugin": "^5.3.2",
"http-proxy-middleware": "^2.0.1",
"husky": "^7.0.2",
"jasmine-core": "^3.9.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.7.0",
"karma-spec-reporter": "0.0.32",
"nocache": "^3.0.1",
"nodemon": "^2.0.13",
"npm-check": "^5.9.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.9",
"postcss-loader": "^6.1.1",
"postcss-url": "^10.1.3",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"protractor": "~7.0.0",
"rimraf": "^3.0.2",
"sass-migrator": "^1.5.2",
"standard-version": "^9.3.1",
"svg-sprite-loader": "^6.0.9",
"ts-node": "^10.2.1",
"tslint": "^6.1.3",
"typescript": "~4.3.5",
"url": "^0.11.0",
"webpack-bundle-analyzer": "^4.4.2",
"ws": "^8.2.3"
}
}