Webpack捆绑失败-没有这样的文件node_modules \ svgo \ .svgo.yml [英] Webpack bundling failed - no such file node_modules\svgo\.svgo.yml
问题描述
我正在尝试使用webpack捆绑我的angular 2应用程序.我的应用程序都包含组件打字稿类以及CSS和html文件.我能够将js文件(app.bundle.js)捆绑在一起，然后将bundle.js文件放入索引html文件中并尝试运行它.但是在运行时浏览器控制台出现错误.这是我的索引html文件
Am trying to bundle my angular 2 applications using webpack .my application both contain component typescript classes and css and html files. i was able to bundle the js files(app.bundle.js).and i put the bundle.js file into the index html file and try to run it . but while running am getting error in the browser console . this is my index html file
<!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配置文件.
so i hope that this is because of not bundling the css files(bootstrap.min.css) . so i tried to bundle that also.this is my web pack configuration file .
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)时出错，捆绑无法成功.
but while running this (webpack -p) am getting errors , the bundling not get successful.
这是运行webpack -p命令时出现的错误
this is the error am getting while running the webpack -p command
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捆绑包中有一些东西.
New Update : i tried to add the bootstrap.min.css manually into the index html file , then also it wont work , got the first error .so i hope there is something with the webpack bundle.
请帮助我
推荐答案
Webpack期望moduleId为字符串，而在Angular中为数字.因此，为了解决此问题，我们应该使用
Webpack expects the moduleId as string, while in Angular it's number. So in order to solve the issue, we should make the moduleId as string by using
ModuleId:module.id.toString()
这篇关于Webpack捆绑失败-没有这样的文件node_modules \ svgo \ .svgo.yml的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
