出力WebpackのJSファイルにサブディレクトリでアクセスできません

Question

webpackを使用してtransformed.jsという名前の出力JSファイルを生成しています。しかし、htmlファイルに挿入する方法に問題があります。 HTMLファイルでは、このファイルの前にスラッシュは含まれていません。そのため、サブディレクトリに移動すると、サブディレクトリ内でこのファイルが検索されるため、ブラウザはtransformed.jsを見つけられません。私はこの

<script type="text/javascript" src="transformed.js"></script> 

ように注入なっている。しかし、理想的に、それはこの

ように注入取得しなければならないことが原因でHTMLでそれをファイルに起こっている、より良い明確化のため

のエラーのスクリーンショットを添付しています

<script type="text/javascript" src="/transformed.js"></script> 

私のWebpack構成はこれです

var HTMLWebpackPlugin = require('html-webpack-plugin'); 
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 
module.exports = { 
    entry: __dirname + "/app/index.js", 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
      { 
       test: /\.svg$/, 
       loader: 'react-svg' 
      }, 
      { 
       test: /\.(png|jpg)$/, 
       loader: 'url-loader?limit=88192' 
      } 
     ] 
    }, 
    devServer: { 
     historyApiFallback: true, 
     contentBase: './' 
    }, 
    output: { 
     filename: 'transformed.js', 
     path: __dirname + '/build' 
    }, 
    plugins: [HTMLWebpackPluginConfig] 
}; 

どうすればこの問題を解決できますか？

Answer 1

てみ設定publicPath：

output: { 
    path: path.join(__dirname, '/build'), 
    filename: 'transformed.js', 
    publicPath: '/' 
}