我一直在关注 Angular“英雄之旅”教程,并认为结合使用 webpack 是个好主意。
应用程序在本地编译良好并且运行没有问题。
存储库托管在 Visual Studio TeamServices 上,提交后会触发构建。 构建似乎也运行良好:
Command: deploy.cmd
Handling node.js deployment.
KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
Copying file: 'package.json'
Copying file: 'tsconfig.json'
Looking for app.js/server.js under site root.
Node.js versions available on the platform are: 0.6.20, 0.8.2, 0.8.19, 0.8.26, 0.8.27, 0.8.28, 0.10.5, 0.10.18, 0.10.21, 0.10.24, 0.10.26, 0.10.28, 0.10.29, 0.10.31, 0.10.32, 0.10.40, 0.12.0, 0.12.2, 0.12.3, 0.12.6, 4.0.0, 4.1.0, 4.1.2, 4.2.1, 4.2.2, 4.2.3, 4.2.4, 4.3.0, 4.3.2, 4.4.0, 4.4.1, 4.4.6, 4.4.7, 4.5.0, 4.6.0, 4.6.1, 5.0.0, 5.1.1, 5.3.0, 5.4.0, 5.5.0, 5.6.0, 5.7.0, 5.7.1, 5.8.0, 5.9.1, 6.0.0, 6.1.0, 6.2.2, 6.3.0, 6.5.0, 6.6.0, 6.7.0, 6.9.0, 6.9.1, 6.9.2, 6.9.4, 6.9.5, 6.10.0, 7.0.0, 7.1.0, 7.2.0, 7.3.0, 7.4.0, 7.5.0, 7.6.0, 7.7.4, 7.10.0, 8.0.0.
Selected node.js version 6.1.0. Use package.json file to choose a different version.
Selected npm version 3.8.6
Updating iisnode.yml at D:\home\site\wwwroot\iisnode.yml
Invalid start-up command "webpack-dev-server --inline --progress --port 8080" in package.json. Please use the format "node <script relative path>".
Missing server.js/app.js files, web.config is not generated
<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2b242d3f262b383e2f273a262b3e2f0a7b647a647a" rel="noreferrer noopener nofollow">[email protected]</a> D:\home\site\wwwroot
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
`-- <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9e939a8f998998839a9eaad8c4d9c4de" rel="noreferrer noopener nofollow">[email protected]</a>
npm WARN notsup Not compatible with your operating system or architecture: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8aecf9effcefe4fef9cabba4bba4b8" rel="noreferrer noopener nofollow">[email protected]</a>
npm WARN optional Skipping failed optional dependency /karma/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3056435546555e444370011e011e02" rel="noreferrer noopener nofollow">[email protected]</a>
npm WARN <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37565950425b564543525a475b564352770619071907" rel="noreferrer noopener nofollow">[email protected]</a> No repository field.
Finished successfully.
但是,当我运行该应用程序时,我在协议(protocol)流中收到以下错误:
ReferenceError: webpackJsonp is not defined
at Object.<anonymous> (D:\home\site\wwwroot\dist\app.js:1:63)
at Module._compile (module.js:446:26)
at Object..js (module.js:464:10)
at Module.load (module.js:353:31)
at Function._load (module.js:311:12)
at Module.require (module.js:359:17)
at require (module.js:375:17)
at Object.<anonymous> (D:\Program Files (x86)\iisnode\interceptor.js:459:1)
at Module._compile (module.js:446:26)
at Object..js (module.js:464:10)
根据https://github.com/webpack/webpack/issues/368文件可能会以错误的顺序加载,但这意味着它也应该在本地失败,但事实并非如此。
这是我的 webpack.common.config:
module.exports = {
entry: {
"polyfills": "./src/polyfills.ts",
"vendor": "./src/vendor.ts",
"app": "./src/main.ts"
},
resolve: {
extensions: [
".js", ".ts", ".less", ".scss"
],
modules: [
'node_modules'
]
},
module: {
loaders: [{
//omitted
}]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills'],
filename: "[name].js",
minChunks: "infinity"
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
}
还有 webpack.prod.js:
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoErrorsPlugin(),
//new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
})
]
});
我做错了什么?如果您还需要构建定义,我很乐意对其进行编辑。
最佳答案
花了一些时间,但最后一分钱都掉了。
我的部署存在几个问题。
Invalid start-up command "webpack-dev-server --inline --progress --port 8080" in package.json. Please use the format "node <script relative path>".
Missing server.js/app.js files, web.config is not generated
Azure 尝试使用npm start
,但是由于 webpack-dev-server 不可用并且命令本身是错误的,因此构建失败了,所有内容都从那里级联下来。
我更改了 npm 脚本:
"scripts": {
"dev": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start",
"start": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
},
然后我开始收到一些关于缺少依赖项的错误。在我第四次失败的部署试验之后,当我意识到 devDependencies: { }
下的所有内容时,这是有道理的。 dependencies: { }
中需要,因为这是 npm install --production
正在获取其依赖。
在这个阶段,构建成功,但我得到了 404
。此问题已得到纠正,但将虚拟路径设置为 /
来自site\wwwroot
至site\wwwroot\dist
:
现在网站已启动并运行。
待办事项:
- 定义部署后步骤以删除/node_modules/文件夹,因为我现在为简单的 Hello World 应用使用 200Meg 的空间。
关于angular - 部署到 Azure 后未定义 webpackJsonp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44530562/