Question

我试图使用webpack .my应用程序捆绑我的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）。所以我试图捆绑它。这是我的网络包配置文件。

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

这有助于你使用纱线（不是npm），我在运行yarn clean后发现了类似的问题。如果是这样，请执行以下操作

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

这些步骤可以解决问题。

Answer 2

Webpack期望moduleId为字符串，而Angular则为number。因此，为了解决这个问题，我们应该使用

将moduleId作为字符串

ModuleId:module.id.toString()

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

2 个答案: