Webpack и Asp.NET MVC 5. Зависает сборка приложения в Visual Studio

20 февраля 2021, 09:40

Реализован проект на Asp.Net MVC 5. К проекту был добавлен webpack.

Скрипты из package.json

"scripts": {
    "build": "webpack --mode development --progress",
    "build::prod": "webpack --mode production --env.production --progress",
    "dev::watch": "webpack --mode development --verbose --watch",
    "dev": "webpack --mode development --verbose --watch",
  }

Также перед сборкой проекта отрабатывает следующий скрипт:

if '$(Configuration)'=='Release' (
    npm run build::prod
) else (
    npm run dev # или npm run dev::watch
)

Если запускать сборку решения с использованием пре-билд скрипта npm run dev::watch, то сборка решения зависает. Webpack сообщает о том, что все js-файлы скомпилированы, но сборка решения не продвигается. Если убрать флаг --watch, то сборка решения идет в штатном режиме.

1) Как правильно использовать webpack с проектами Asp.Net MVC 5 и с использованием --watch?

2) Есть ли какие-нибудь практики по использованию HMR в проектах Asp.Net MVC 5? Существует ли какой-нибудь аналог UseWebpackDevMiddleware() из .Net Core?

Заранее благодарю.

Answer 1

Вышли из ситуации следующим образом.

Добавили webpack-dev-server. Теперь, кроме запуска самого приложения, рядом запускаем webpack-dev-server. Команда в npm: webpack-dev-server --inline --progress --port 9000.

Настройки devServer, которые мы используем:

devServer: {
   contentBase: ".",
   host: "localhost",
   hot: true
}

В Web.config добавили следующие переменные:

<appSettings>
    <add key="UseWebpackDevServer" value="true" />
    <add key="WebpackDevServerRoot" value="http://localhost:9000" />
</appSettings>

Также создали класс с настройками:

public static class Settings
{
    public static bool UseWebpackDevServer => "true".Equals(ConfigurationManager.AppSettings["UseWebpackDevServer"], StringComparison.InvariantCultureIgnoreCase);
    public static string WebpackDevServerRoot => ConfigurationManager.AppSettings["WebpackDevServerRoot"];
}

Добавили в Layout.cshtml следующее условие:

@if (Settings.UseWebpackDevServer)
{
    <script type="text/javascript" src="@(Settings.WebpackDevServerRoot)/main.min.js"></script>
}
else
{
    <script src="~/Scripts/main.min.js"></script>
}

Заработало вместе с Hot Module Replacement. Оригинал статьи здесь.