Webpack, ASP.NET Core和Docker：如何在dotnet调试或发布构建中构建Webpack

Question

我有一个类似于 `aspnetcore-spa` 提供的 asp.net core 应用程序。Webpack 已经为 `--env.prod` 和 `--env.dev` 进行了设置，并且通过 `JavaScriptServices` 进行了集成。

在 Visual Studio 2015 中构建和运行应用程序似乎很正常。开发环境下使用 `Kestrel` 运行调试构建时，webpack 中间件会重新构建客户端应用程序，并且热模块替换效果良好（虽然有点慢，这很可能是由于硬编码引用的资产需要复制所致）。

但是，供应商捆绑包永远不会重新构建，也不会运行 `--env.prod` webpack 构建。我认为这一切都能够正常工作（甚至在示例中），仅仅因为文件的某个版本已提交到存储库中。

运行 `dotnet run` 或者 `dotnet build` 是不够的，因为这不涉及webpack。我可以在 `package.json` 中提供一些脚本来解决这个问题，但我不知道如何（或是否可以）将其嵌入到Visual Studio 的构建中 - 况且，我使用 `npm` 而不是直接使用 `dotnet`，感觉有点不太对劲。

这整个问题还与我的构建可调试的 Docker 映像的问题有关。我想我可以在容器中运行 webpack 并将所有源代码复制到那里 - 但这仍然存在一个问题：

如何将 webpack 构建集成到 Visual Studio 中（或者更好地说，是 `dotnet`）？

- urbanhusky

---

如果你找到了解决方案，我肯定很想听听。 - J. Allen

同样地。与此同时，我发现这个链接对我很有价值：https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4#.m1rqo3r1g - Hylaean

这个答案对你有帮助吗？ - urbanhusky

Answer 1

我们通过我们的流程和使用npm脚本解决了这个问题

• 构建、部署等都是通过npm脚本处理的
• 每当有人检出分支、拉取提交或添加新的供应商依赖项时，他们运行npm run build-webpack-dev-vendor，这是一个运行npm-run webpack --env.dev --config ./config/webpack.config.vendor.js的npm脚本
• Docker构建也是从npm脚本运行的

Webpack的构建输出被放入wwwroot目录中，其整个内容都被gitignore（除了.gitignore）。

Webpack脚本

这些脚本用于任何或所有webpack构建。

"build-webpack-dev": "npm run build-webpack-dev-vendor && npm run build-webpack-dev-app",
"build-webpack-dev-vendor": "npm-run webpack --config ./config/webpack.config.vendor.js --env.dev",
"build-webpack-dev-app": "npm-run webpack --env.dev --display-modules",
"build-webpack-prod": "npm run build-webpack-prod-vendor && npm run build-webpack-prod-app",
"build-webpack-prod-vendor": "npm-run webpack --config ./config/webpack.config.vendor.js --env.prod",
"build-webpack-prod-app": "npm-run webpack --env.prod --display-modules",

我们的配置不区分生产环境和开发环境的供应商构建。 注意：需要安装npm-run。

Docker脚本

这些脚本用于构建和发布我们的Docker镜像。 我们有快速版本的脚本，可以加速发布（无需重新构建，无需额外登录）。

"docker-build-prod": "dotnet publish --configuration Release && docker build bin\\Release\\netcoreapp1.1\\publish -t company/product:tag --no-cache",
"docker-publish-prod": "npm run docker-build-prod && docker login && docker push company/product:tag",
"docker-publish-prod-fast": "docker push company/product:tag",
"docker-login": "docker login",

开发人员应该检查构建输出，如果应用程序中有任何捆绑包应该移动到供应商捆绑包中（因此在webpack构建中使用--display-modules）。

补充脚本

最后，我们团队中并不是每个人都在使用Visual Studio（例如设计师）。我们为他们提供了一些脚本和一些更通用的脚本。 快速变体跳过npm install、构建供应商捆绑包和恢复nuget包。

"start-dev": "npm install && npm run build-webpack-dev && dotnet restore && dotnet run --configuration Debug --environment \"Development\"",
"start-dev-fast": "dotnet run --configuration Debug --environment \"Development\"",
"start-prod": "npm install && npm run build-webpack-prod && dotnet restore && dotnet run --configuration Release --environment \"Production\"",
"start-prod-fast": "npm run build-webpack-prod-app && dotnet run --configuration Release --environment \"Production\"",

最后，为了保险起见

"refresh": "npm install && dotnet restore"

希望这有所帮助，我也很乐意听取改进建议 :)

- urbanhusky