我已将webpack添加到angular应用程序，并能够使用“Task Runner Explorer”或“npm run build：prod”在根目录中编译Web包配置从命令提示符的项目。我想在命令提示符下编译webpack配置作为msbuild的一部分。我尝试过以下命令，但因为无法解析模块而出现错误
E：\ Website \ Sample＆gt; E：\ Website \ Sample \ sampleapp \ node_modules.bin \ webpack.cmd --config E：\ Website \ Sample \ sampleapp \ webpack.prod.js
ERROR in Entry module not found: Error: Can't resolve 'awesome-typescript-loader' in 'E:\Website\Sample'
ERROR in Entry module not found: Error: Can't resolve 'awesome-typescript-loader' in 'E:\Website\Sample'
ERROR in multi jquery bootstrap
Module not found: Error: Can't resolve 'bootstrap' in 'E:\Website\Sample'
@ multi jquery bootstrap
ERROR in multi jquery bootstrap
Module not found: Error: Can't resolve 'jquery' in 'E:\Website\Sample'
@ multi jquery bootstrap
ERROR in Error: Child compilation failed:
Entry module not found: Error: Can't resolve 'E:\Website\Sample\index_template.html' in 'E:\Website\Sample':
Error: Can't resolve 'E:\Website\Sample\index_template.html' in 'E:\Website\Sample'
- compiler.js:76
[sampleapp]/[html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:300 compile
[sampleapp]/[webpack]/lib/Compiler.js:300:11
- Compiler.js:510 applyPluginsAsync.err
[sampleapp]/[webpack]/lib/Compiler.js:510:14
- Tapable.js:202 next
[sampleapp]/[tapable]/lib/Tapable.js:202:11
- CachePlugin.js:78 Compiler.<anonymous>
[sampleapp]/[webpack]/lib/CachePlugin.js:78:5
这是webpack配置文件 的 webpack.common.js
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
target: "web",
resolve: {
// Add ".ts" and ".tsx" as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json", ".html"],
},
module: {
loaders: [
// All files with a ".ts" or ".tsx" extension will be handled by "awesome-typescript-loader".
{ test: /.ts$/, loader: "awesome-typescript-loader" },
// All image files will be handled here
{
test: /\.(png|svg|jpg|gif)$/,
use: [
"file-loader"
]
},
// All font files will be handled here
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader"
}
]
},
// All files with ".html" will be handled
{ test: /\.html$/, loader: "html-loader" },
// All output ".js" files will have any sourcemaps re-processed by "source-map-loader".
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: ([
// make sure we allow any jquery usages outside of our webpack modules new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
// Clean dist folder.
new CleanWebpackPlugin(["./dist"], {
"verbose": true // Write logs to console.
}),
// avoid publishing when compilation failed.
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
inject: "body",
filename: "../index.html",
template: "index_template.html"
})
]),
// pretty terminal output
stats: { colors: true }
};
Webpack.prod.js
const path = require("path");
const webpack = require("webpack");
const Merge = require("webpack-merge");
const CommonConfig = require("./webpack.common.js");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// Images, Fonts Loading: https://webpack.js.org/guides/asset-management/
// LESS Loading: https://webpack.js.org/loaders/less-loader/
// Code splitting: https://webpack.js.org/guides/code-splitting
// Caching: https://webpack.js.org/guides/caching/
const extractLess = new ExtractTextPlugin({
filename: "[name].[contenthash].css"
});
module.exports = Merge(CommonConfig, {
devtool: "hidden-source-map",
entry: {
index: path.resolve(__dirname, "app/index.ts"),
main: path.resolve(__dirname, "main.ts"),
vendor: [
"jquery",
"bootstrap",
]
},
output: {
filename: "[name].[chunkhash].js",
path: __dirname + "/dist",
// Making sure the CSS and JS files that are split out do not break the template cshtml.
publicPath: "/dist/",
// Defining a global var that can used to call functions from within ASP.NET Razor pages.
library: "aspAndWebpack",
libraryTarget: "var"
},
module: {
loaders: [
// All CSS files will be handled here
{
test: /\.css$/,
use: extractLess.extract({ fallback: "style-loader", use: ["css-loader"] })
},
// All files with ".less" will be handled and transpiled to css
{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "less-loader", options: {
sourceMap: true
}
}]
})
},
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("production")
}
}),
// Split out library into seperate bundle and remove from app bundle.
new webpack.HashedModuleIdsPlugin(),
//new webpack.optimize.DedupePlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
//new webpack.optimize.CommonsChunkPlugin('common'),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor"
}),
// Webpack boilerplate and manifest in seperate file.
new webpack.optimize.CommonsChunkPlugin({
name: "runtime"
}),
// Write out CSS bundle to its own file:
extractLess,
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
beautify: false,
mangle: {
screw_ie8: true,
keep_fnames: true
},
compress: {
screw_ie8: true
},
comments: false
})
]
})
的package.json
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"bootstrap": "^3.3.7",
"core-js": "2.5.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lodash": "4.17.10",
"moment": "2.22.1",
"ngx-progressbar": "^2.1.1",
"primeng": "5.2.0",
"quill": "1.3.1",
"adal-angular": "1.0.17",
"rxjs": "^6.2.0",
"rxjs-compat": "^6.2.0",
"systemjs": "^0.21.3",
"typescript": "2.7.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@types/lodash": "4.14.108",
"@types/node": "*",
"awesome-typescript-loader": "^3.2.3",
"bootstrap-loader": "^2.2.0",
"bootstrap-sass": "^3.3.7",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"less": "3.0.4",
"less-loader": "4.0.5",
"node-sass": "^4.8.3",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^6.0.7",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"tslint": "^5.9.1",
"url-loader": "^1.0.1",
"webpack": "^3.11.0",
"webpack-merge": "^4.1.2"
},
需要帮助从绝对路径编译配置作为msbuild（CDPx）的一部分。我不希望使用afterbuild将编译作为csproj的一部分。
答案 0 :(得分：0)
这意味着它找不到包含框架内的node_modules文件夹。我不确定如何自定义直接节点指向根目录之外，我通常会看到人们只是在该子目录中安装另一个package.json文件和node_modules文件夹以使其工作。
看起来很丑陋，我会接下来的打击