Webpack HMR module.hot.accept () не может указать зависимость - PullRequest
Новая
       53

Webpack HMR module.hot.accept () не может указать зависимость

0 голосов
/ 21 октября 2019

У меня есть приложение SPA с Vuejs и ASP.NET Core 2.2 со следующим слоем / папкой

Мое решение

  • Приложение
  • Asp.NET Coreweb
  • [..] Другие C # dll

При связывании app с веб-пакетом выходные данные отправляются в папку wwwroot папкиПриложение Asp.NET.

Ниже соответствующих пакетов

Кодовых пакетов

  • Vue 2.6.10
  • Typescript 3.6.4
  • Vuex 3.1.1

Пакеты разработчика

  • Webpack 4.41.0
  • Webpack-hot-middleware 2.25.0
  • Babel-загрузчик 8.0.6
  • Aspnet-webpack 3.0.0

tsconfig.json 

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "esNext",
    "target": "es6",
    "lib": [ "es2016", "dom" ],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "strict": true,
    "baseUrl": "./",
    "strictNullChecks": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "paths": {
      "@/*": ["src/*"],
      "@tests/*": ["tests/*"]
    }    
  },
  "compileOnSave": false,
  "exclude": [
    "node_modules"
  ]
}

babel.config.js

function config(api) {

    api.cache(true);

    // preset-env necessary for jest

    return {
        "presets": [
            ['@babel/preset-env', {
                targets: {
                    node: 'current'
                },
                useBuiltIns: "usage",
                corejs: '3',
            }],
            ["@babel/preset-typescript"]
        ],
        "plugins": [
            ["@babel/plugin-proposal-decorators", {
                "legacy": true
            }],
            ["@babel/plugin-proposal-class-properties", {
                "loose": true
            }],
            ["@babel/plugin-syntax-dynamic-import"]
        ]
    }
}

module.exports = config;

webpack.config.js 

const path = require('path');

const wwwroot = path.resolve('..', 'AspNET', 'wwwroot', 'js');

module.exports = {
    mode: 'development',
    entry: {
        app: './src/app.ts'
    },
    output: {
        path: wwwroot,
        filename: '[name].js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/js/'
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /.html$/,
                loader: 'vue-template-loader'
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'initial',
                    enforce: true,
                    priority: -10
                }
            }
        }
    },
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src'),
            test: path.join(__dirname, 'test')
        },
        extensions: ['.js', '.tsx', '.ts']
    }
};

запуск ядра Asp.net.cs 

var path = Directory.GetParent(Environment.CurrentDirectory).FullName + @"\ClientApp";
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    HotModuleReplacement = true,
                    HotModuleReplacementEndpoint = "/dist/__webpack_hmr",
                    ProjectPath = path,
                    ConfigFile = "webpack.config.js"
                });

Проблема

Я не могу указать зависимостиза module.hot.accept. Если в моем app.ts я добавляю этот код 

if (module.hot) {
    module.hot.accept();
}

Все работает: обновление субмодуля обновляет приложение, и пользовательский интерфейс обновляется, но если я укажу 

if (module.hot) {
    module.hot.accept(['./app'], ()=>{
         console.log("Updated");
    });
}

Неработа

Моя цель - решить проблему, связанную с hmr и vuex, когда при обновлении hmr модуля vuex с помощью getters ошибка повышения приложения

[vuex] дублирующий ключ получения:msal / account

Сайт vuex предлагает использовать Горячая перезагрузка vuex , но я не могу указать зависимости для обновления.

...