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/") 
    }) 
    ] 
}); 

私はそれが完全に提供さIを動作するように取得することができますHtmlWebpackPluginを使用しないでください。ただし、ファイルのハッシュを利用したいと思います。これについての助けがあれば、大歓迎です！

z

Answer 1

答えは痛いほど簡単でした。私はローカルで実行しているときにこれが働いていたが、紺碧のために展開するとき、私は以下の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> 

を必要として、次の

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

にwebpack.dev.config.jsでdevServerを交換しなければなりませんでした