Webpack-dev-server HMR не работает для приложения Angular - PullRequest
Новая
       70

Webpack-dev-server HMR не работает для приложения Angular

0 голосов
/ 29 мая 2020

В моем приложении Angular я пытаюсь использовать webpack-dev-server. Моя конфигурация веб-пакета выглядит следующим образом: 

//"use strict";

var webpack = require("webpack");

const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin;

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const resolve = require('path').resolve;

module.exports = function(env) {
  var environment = "'development'";
  console.log("Env: " + environment);

  return {
    stats: "errors-only",
    devtool: "source-map",
    mode: (environment == "'production'") ? "production" : "development",

    entry: {
      "polyfills": "./polyfills.ts",
      "vendor": "./vendor.ts",
      "main": "./main.ts",
      "styles": "./styles.ts"
    },

    resolve: {
      modules: [
        "node_modules",
        path.resolve(process.cwd(), "src")
      ],
      extensions: [".ts", ".js"]
    },
    context: path.join(process.cwd(), "./src"),

    output: {
      globalObject: 'this',
      path: path.join(process.cwd(), "dist"),
      publicPath: '/',
      filename: "[name].bundle.js",
      chunkFilename: "[name].chunk.js"
    },
    target: 'web',
    devServer: {
      disableHostCheck: true,
      host: require("os").hostname().toLowerCase(),
      publicPath: "/",
      port: 3000,
      watchContentBase: true,
      watchOptions: {
        poll: true
      },
      inline: true,
      hot: true,
      historyApiFallback:  {
        index: "/index.html"
      },
      https: true,
      proxy: {
        "/api": {
          //target: "https://" + require("os").hostname().toLowerCase() + "/"
          target:'https://URL.edu/',
          secure: false,
          changeOrigin:true,
          logLevel:"debug"
        },
        "/legacy/api": {
          //target: "https://" + require("os").hostname().toLowerCase() + "/"
          target:'https://URL.edu/',
          secure: false,
          changeOrigin:true,
          logLevel:"debug"
        },
        "/auth": {
          //target: "https://" + require("os").hostname().toLowerCase() + "/"
          target:'https://URL.edu/',
          secure: false,
          changeOrigin:true,
          logLevel:"debug"
        }
      },
      contentBase: "/src/",
     // contentBase:path.resolve(__dirname, 'build'),
      stats: {
        colors: true,
        hash: false,
        version: false,
        timings: false,
        assets: true,
        chunks: false,
        modules: false,
        reasons: true,
        children: false,
        warnings: true,
        publicPath: false
      }
    },

    module: {
      rules: [
        {
          test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
          loader: '@ngtools/webpack'
        },
        {
          test: /\.html$/,
          loader: "html-loader"
        },
        {
          test: /\.less$/,
          loader: "raw-loader!less-loader"
        },
        {
          test: /\.scss$/,
          use: ["raw-loader", "sass-loader"]
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
         // use: [ "css-loader"]
        },
        {
          test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=application/font-woff"
        },
        {
          test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=application/font-woff"
        },
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=application/octet-stream"
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: "file-loader"
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=image/svg+xml"
        }
      ]
    },

    plugins: [
      new webpack.ProgressPlugin(),


      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        path.join(process.cwd(), "src")
      ),

      new HtmlWebpackPlugin({
        filename: "index.html",
        template: "index.html"
      }),
      new webpack.HotModuleReplacementPlugin(),

      new CopyWebpackPlugin([
        {
          from: "favicon.ico",
          to: "favicon.ico"
        },
        {
          from: "assets",
          to: "assets"
        },
        {
          from: "data",
          to: "data"
        }
      ]),

      new AngularCompilerPlugin({
        tsConfigPath: "./tsconfig.json",
        entryModule: "./src/app/app.module.ts#AppModule",
        sourceMap: true
      }),

      new webpack.DefinePlugin({
        "ENV": environment,
        "process.env": {
          "ENV": environment,
          "NODE_ENV": environment
        },
        "CONTENT_PATH": "'/ccr2/'",
        "VERSION": JSON.stringify(require("../package.json").version),
        "USE_HASH": true
      }),

      new webpack.ProvidePlugin({
        d3: "d3"
      })
    ]
  };
}

Однако, когда я вношу изменение кода, я вижу, что это заставляет браузер перезагружать страницу, а не HMR.

Может ли кто-нибудь заметить что-то, что я пропустил, или какие-нибудь идеи, как заставить это работать?

Могу добавить пакет. json, если кто-то захочет его увидеть.

1 Ответ

0 голосов
/ 01 июня 2020

Мне пришлось добавить в main.ts следующее: 

///<reference types="webpack-env" />
if (module.hot) {
  module.hot.accept();
}

Кроме того, было полезно использовать параметр «Сохранить журналы» на консоли chrome.

...