HMR не работает с ядром vue и asp.net

Question

Привет, я новичок в webapck и vue, я пытаюсь перезагрузить горячий модуль, чтобы моя страница обновлялась с изменениями. На данный момент это работает, когда я Ctrl F5 страницы.

Я использую основной сайт asp.net, который запускает сайт через IIS, если это имеет значение.

Я использовал этот ответ для запуска и запуска:

https://stackoverflow.com/a/49428220/66975

Вот мой webpack.config.js:

    const { VueLoaderPlugin } = require('./node_modules/vue-loader')
module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './wwwroot/js/bundle.js'//'./Vue/dist/bundle.js'
    },
    watch: true,
    plugins: [
        new VueLoaderPlugin()
    ],
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};

Пакет JSON:

{
  "name": "WebApplication13",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^15.2.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.12.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

Answer 1

Я знаю, что уже немного поздно, но относительно легко настроить HMR с проектами Asp.net Core.

Сначала в вашем package.json вам нужно только добавить эти 2 пакета.

"aspnet-webpack": "^3.0.0", 
"webpack-dev-middleware": "^3.1.3"

Aspnet-webpack, необходимо добавить для использования webpack в сочетании с Aspnet.

Во-вторых, в вашем основном проекте asp.net вы должны использовать пакет Nuget Microsoft.AspNetCore.SpaServices (В Asp.net Core 2.1 он, похоже, включен по умолчанию через пакет Microsoft.AspNetCore.All)

Наконец, просто добавьте следующее к вашему Configure методу внутри вашего Startup.cs (или эквивалентного).

if (env.IsDevelopment())
{    
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
    {
        HotModuleReplacement = true
    });
}

(Мы хотим включить HMR только во время разработки)

Также перейдем по ссылке на этот , точнее на эту часть:

Если вы хотите использовать UseWebpackDevMiddleware помощник с HotModuleReplacement, то не добавляйте ничего о HMR в вашу конфигурацию Webpack, , потому что код помощника добавляет это динамически . Например, не ставьте webpack.HotModuleReplacementPlugin() в вашей конфигурации.

Надеюсь, это поможет!