webpack - Hot Module Replacement (HMR) を使用した Vue.js 遅延読み込みルート

Question

次のようなWebpack 動的ステートメントを使用して、Vue.js ルートを遅延ロードしようとしています。vue-routerimport

const routes = [
  {
    component: () => import("./components/home.vue"),
    name: "home",
    path: "/",
  },
  {
    component: () => import("./components/child.vue"),
    name: "child",
    path: "/child",
  }
};

これにより、Webpack は JavaScript バンドルをルートごとに正しく分割し、最終的にmain.js一連の0.js,1.jsファイルになります。また、これらは Chrome 開発ツールで要求されることにも注意しました。

ただし、これを Hot Module Replacement (HMR) で機能させることはできないようです。サーバー側に ASP.NET Core を使用しています。ページが読み込まれると、空のページが表示されます。HMR で Vuex を使用する場合、このドキュメントに従って、Vuex ストアをリロードできるようにする必要がありました。遅延ロードされたルートに対して行う必要がある同様のことはありますか? これが役立つ場合、私の webpack.config.js ファイルは次のとおりです。

import * as BrotliPlugin from "brotli-webpack-plugin";
import * as CompressionPlugin from "compression-webpack-plugin";
import * as ExtractTextPlugin from "extract-text-webpack-plugin";
import * as ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import * as path from "path";
import * as StyleLintPlugin from "stylelint-webpack-plugin";
import * as SpriteLoaderPlugin from "svg-sprite-loader/plugin";
import * as webpack from "webpack";
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";

const configurationBuilder = (env) => {
  const isDevBuild = !(env && env.prod);

  const cssDirectoryName = "css";
  const jsDirectoryName = "js";

  const wwwRootDirectory = "./wwwroot";
  const jsDirectory = `./wwwroot/${jsDirectoryName}`;

  const configuration = {
    stats: { modules: false },
    context: __dirname,
    resolve: {
      extensions: [".js", ".ts", ".vue"],
      alias: {
        vue$: "vue/dist/vue.common.js",
      },
    },
    entry: { main: "./ClientApp/Boot.ts" },
    module: {
      rules: [
        {
          test: /\.vue$/,
          include: /ClientApp/,
          loader: "vue-loader",
          options: {
            preserveWhitespace: isDevBuild, // Ignore white space in HTML
          },
        },
        {
          test: /\.ts$/,
          include: /ClientApp/,
          loader: "ts-loader",
          options: {
            appendTsSuffixTo: [/\.vue$/],
            silent: true,
            transpileOnly: true,
          },
        },
        {
          test: /\.scss$/,
          use: isDevBuild ? getSassLoaders() : ExtractTextPlugin.extract({ use: getSassLoaders() }),
        },
        {
          test: /\.svg$/,
          oneOf: [
            {
              resourceQuery: /inline/,
              use: getSvgUrlLoaders(),
            },
            {
              use: getSvgSpriteLoaders(),
            },
          ],
        },
        {
          test: /\.(png|jpg|jpeg|gif)$/,
          loader: "url-loader",
          options: {
            limit: 25000,
          },
        },
      ],
    },
    output: {
      path: path.join(__dirname, wwwRootDirectory),
      filename: "js/[name].js",
      chunkFilename: "js/[name].js",
      publicPath: `${jsDirectoryName}/`, // Needs a trailing slash for hot module replacement to work
    },
    plugins: [
      new ForkTsCheckerWebpackPlugin({
        tslint: true,
        vue: true,
      }),
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: JSON.stringify(isDevBuild ? "development" : "production"),
        },
      }),
      new StyleLintPlugin({
        configFile: ".stylelintrc.json",
        files: ["ClientApp/css/**/*.scss"],
      }),
      new SpriteLoaderPlugin(),
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require(`${jsDirectory}/vendor-manifest.json`),
      }),
    ].concat(isDevBuild ? [
      new webpack.SourceMapDevToolPlugin({
        filename: "[file].map",
        moduleFilenameTemplate: path.relative(jsDirectory, "[resourcePath]"),
      }),
    ] : [
        // Plugins that apply in production builds only
        new webpack.optimize.UglifyJsPlugin({
          comments: false,
        }),
        new ExtractTextPlugin(
          `${cssDirectoryName}/[name].css`),
        new CompressionPlugin({
          minRatio: 0.9,
          test: /\.(css|js|json|svg)$/,
        }),
        new BrotliPlugin({
          minRatio: 0.9,
          test: /\.(css|js|json|svg)$/,
        }),
        new BundleAnalyzerPlugin({
          analyzerMode: "static",
          openAnalyzer: false,
          reportFilename: "../bin/main-webpack-bundle-report.html",
        }),
      ]),
  };
  return configuration;
};

export default configurationBuilder;