webpack - svg-sprite-loader with Angular 8 custom webpack config

Question

I am trying to use svg-sprite-loader package (to create a svg sprite) with my Angular 8 project using custom webpack config.

I am using below custom config:

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,
        }),
    ],
};

I am getting following error while running ng build:

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

I am not able to identify where the issue is, is it with my config or the package itself.

Answer 1

您可能需要通过npm i -D 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。