带有 Angular 8 个自定义 webpack 配置的 svg-sprite-loader

Question

我正在尝试使用自定义 webpack 配置将 svg-sprite-loader 包（创建 svg sprite）与我的 Angular 8 项目一起使用。

我正在使用以下自定义配置：

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(svg)$/,
                loader: 'svg-sprite-loader',
                options: {
                    spriteFilename: './src/assets/svg/combinedicons.svg',
                    runtimeCompat: true,
                },
            },
        ],
    },
    plugins: [
        new SpriteLoaderPlugin({
        plainSprite: true,
        }),
    ],
};

运行 ng 构建时出现以下错误：

Cannot find module 'webpack/package.json' Error: Cannot find module 'webpack/package.json'

我无法确定问题出在哪里，是我的配置问题还是软件包本身。

Answer 1

您可能需要通过 npm i -D webpack.

将 Webpack 安装为显式依赖项

或者您可能安装了 2 个不同版本的 Webpack。

运行 npm ls webpack.

你应该看到这样的东西：

user$ npm ls webpack
@my-app /Users/user/my-app
├─┬ @angular-devkit/build-angular@0.13.9
│ └── webpack@4.29.0  deduped
└── webpack@4.29.0

如果您有不同版本的 webpack，请尝试 npm 安装与 @angular-devkit/build-angular 依赖项相匹配的 webpack 版本。

如果您全局安装了 CLI，还值得检查一下您是否全局安装了多个版本的 Webpack。

我相信你可以运行 npm ls -g webpack.

带有 Angular 8 个自定义 webpack 配置的 svg-sprite-loader

svg-sprite-loader with Angular 8 custom webpack config

webpack

svg-sprite

angular8