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

Question

我正在尝试使用 webpack 捆绑我的 angular 2 个应用程序。我的应用程序都包含组件打字稿类和 css 以及 html 文件。我能够捆绑 js 文件（app.bundle.js）。我将 bundle.js 文件放入索引 html 文件并尝试运行它。但是运行ning 在浏览器控制台中出现错误。这是我的索引 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)。所以我试图捆绑 also.this 是我的网络包配置文件。

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 手动添加到索引 html 文件中，然后它也不起作用，得到第一个错误。所以我希望 webpack 包有一些东西.

请帮我解决这个问题

Answer 1

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

将 moduleId 设为字符串

ModuleId:module.id.toString()

Answer 2

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

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

这些步骤将解决问题。

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

Webpack bundling failed - no such file node_modules\svgo\.svgo.yml

webpack

webpack-style-loader

html-webpack-plugin

webpack-2

angular