使用Webpack刷新时无法获取angular5应用

Question

我正在构建一个angular5应用，并且我已经引入了HtmlWebpackPlugin，这导致重新加载时无法解决问题。

这是我的webpack配置

webpack.base.config.js

const webpack = require("webpack");

module.exports = { 
  entry: {
    app: "./scripts/app/index",
    style: "./scripts/style/index"
  },

  plugins:[
    new webpack.optimize.CommonsChunkPlugin("shared"),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: "popper.js"
    })
  ],

  module:{
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.html?$/, exclude: /node_modules/, use: ["raw-loader"]},
      { test: /^(?!.*component).*\.scss$/, exclude: [/node_modules/], use: ["style-loader", "css-loader", "sass-loader"] },
      { test: /\.component\.scss$/, exclude: [/node_modules/], use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
      { test: /\.tsx?$/, exclude: /node_modules/, use: "awesome-typescript-loader?silent=true" },
      { test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ["url-loader?limit=10000&mimetype=application/font-woff"] },
      { test: /\.(png|gif|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: ["file-loader"] }
    ]
  },

  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  }
}

webpack.dev.config.js

const baseConfig = require("./webpack.base.config");
const htmlWebpackPlugin = require('html-webpack-plugin');
const merge = require("webpack-merge");
const webpack = require("webpack");
const path = require("path");

module.exports = merge(baseConfig, {
  watch: true,
  devtool: "inline-source-map",

  devServer: {
    port: 7777,
    historyApiFallback: {
      index: "index.html"
    }
  },

  output:{
    path: path.resolve("./"),
    publicPath: "/",
    filename: "[name]-bundle.js"
  },

  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html',
      inject: 'body',
      hash: true,
      template: './index.template.html'
    }),
    new webpack.DefinePlugin({
      API: JSON.stringify("http://myapi.dev/")
    })
  ]
});

如果不使用HtmlWebpackPlugin，但我想利用文件散列，就可以使其正常工作。 任何帮助，将不胜感激！

ž

Answer 1

答案很简单。 我必须将webpack.dev.config.js中的devServer替换为以下内容

devServer: {
    port: 7777,
    historyApiFallback: true
  },

这在本地运行时有效，但是在部署到Azure时，我需要以下web.config

<configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>