Webpack 捆绑失败 - 没有这样的文件 node_modules\svgo\.svgo.yml答案

【问题标题】：Webpack bundling failed - no such file node_modules\svgo\.svgo.ymlWebpack 捆绑失败 - 没有这样的文件 node_modules\svgo\.svgo.yml
【发布时间】：2023-03-25 07:10:01
【问题描述】：

我正在尝试使用 webpack 捆绑我的 angular 2 应用程序。我的应用程序都包含组件 typescript 类以及 css 和 html 文件。我能够捆绑 js 文件（app.bundle.js）。我将 bundle.js 文件放入索引 html 文件并尝试运行它。但是在运行时在浏览器控制台中出现错误。这是我的索引 html 文件

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
  </head>

  <body>
    <my-app>Loading client...</my-app>
    <script src="./dist/app.bundle.js"></script>
  </body>
</html>

这是我得到的错误。

Error: moduleId should be a string in "e". If you're using Webpack you should inline the template and the styles.

所以我希望这是因为没有捆绑 css 文件（bootstrap.min.css）。所以我也尝试捆绑它。这是我的 web pack 配置文件。

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry:'./app/main.ts',
output:{
    path:__dirname+'/dist',
    filename:'app.bundle.js'
},
module:{
    loaders:[
        {test:/\.ts$/,loader:'ts-loader'},
       {
        test: /\.css$/,
         use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
      }
    ]
},
plugins: [
        new ExtractTextPlugin('styles.css'),
    ],
resolve:{
    extensions:['.js','.ts','.css']
}

}

但是在运行这个 (webpack -p) 时出现错误，捆绑没有成功。

这是运行 webpack -p 命令时遇到的错误

ERROR in ./bower_components/bootstrap/dist/css/bootstrap.min.cssModule build failed: Error: ENOENT: no such file or directory, open 'G:\mywork\Node\MyTaskList\client\node_modules\svgo\.svgo.yml'
at Error (native)

有人可以帮我解决这个问题吗？

新更新：我尝试将 bootstrap.min.css 手动添加到 index html 文件中，然后它也不起作用，出现第一个错误。所以我希望 webpack 包有一些东西。

请帮帮我

【问题讨论】：

标签： angular webpack webpack-2 webpack-style-loader html-webpack-plugin

【解决方案1】：

如果您使用 yarn（不是 npm），这会有所帮助，我在运行 yarn clean 后发现了类似的问题。如果是这样，只需执行以下操作

删除.yarnclean文件
删除node_modules，
重新运行yarn install

这些步骤将解决问题。

【讨论】：

【解决方案2】：

Webpack 期望 moduleId 是字符串，而在 Angular 中它是数字。所以为了解决这个问题，我们应该使用将moduleId作为字符串

ModuleId:module.id.toString()

【讨论】：