WebpackのフォントとテンプレートがpublicPathを尊重しない - ローダーに何が問題なの？

Question

私はWebpack-dev-serverを使ってウェブサイトのフロントエンドを開発しました。

今、私の生産サーバの/staticフォルダからwebpack bundleを提供したいと思います。

output.publicPath = "static/" 

マイJavaScriptとCSSのバンドルは今適切にそれぞれ/static/app.<hash>.jsと/static/app.<hash>.cssの場所から提供されている（そう、HtmlWebpackPluginとExtractTextWebpackPluginは罰金答え）：次のようにその終わりのために私はWebPACKの構成を変更しました。

しかし、htmlのテンプレートとフォントは奇妙な動作をして、publicPathの設定を無視または誤解しているようです。

Htmlテンプレートは、static/という接頭辞なしで参照されます。 https://example.com/components/header/header.html。

フォントは、プレフィックスDOUBLEで参照されます。 https://example.com/static/static/fontawesome-webfont-db812d8.woff2。

物理マシン上のこれらのアセットの場所については、CommonJSモジュールとしてJavaScriptバンドル（app.<hash>.js）のインラインhtmlテンプレートを使用しています。私は自分のサイトの/staticフォルダに別々のファイルとしてフォントを入れ、正しいURLの下でも利用可能ですhttps://example.com/static/fontawesome-webfont-db812d8.woff2。

がここにあります私の生産のためのwebpack.config.jsいっぱい：

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const environmentsFile = path.join(__dirname, "/environments.json") 
const nodeModulesPath = path.join(__dirname, "/node_modules"); 
const bowerComponentsPath = path.join(__dirname, "/bower_components") 

const webpackConfig = { 
    entry: { 
     app: ["app.js"] 
    }, 

    output: { 
     path: path.join(__dirname, "..", "static"), 
     publicPath: "/static", 
     filename: "app.[hash:7].js" 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) 
     ), // bower; see: https://github.com/webpack/docs/wiki/usage-with-bower 
     new ExtractTextPlugin("app.[hash:7].css"), 
     new HtmlWebpackPlugin({ 
      inject: "body", 
      template: "app/index.html", 
      filename: "index.html" 
     }), 
    ], 

    resolve: { 
     root: [path.join(__dirname, "/app"), nodeModulesPath, bowerComponentsPath] 
    }, 

    noParse: [nodeModulesPath, bowerComponentsPath], 

    module: { 
     preLoaders: [ 
      { 
       test: /\.js$/, 
       exclude: [nodeModulesPath, bowerComponentsPath], 
       loaders: [`env-replace?prefix=@@&file=${environmentsFile}`] 
      } 
     ], 

     loaders: [ 
      { 
       test: /[\/]angular\.js$/, 
       exclude: [nodeModulesPath], 
       loader: "exports?angular" 
      }, 

      { 
       test: /\.js$/, 
       exclude: [nodeModulesPath, bowerComponentsPath], 
       loaders: ["ng-annotate", "babel?presets[]=es2015&cacheDirectory=true"] 
      }, 

      { 
       test: /\.s?css$/, 
       loader: ExtractTextPlugin.extract("style", "css?name=[name]-[hash:7].[ext]!postcss-loader!" + `sass?includePaths[]=${path.join(__dirname, "/app")}`) 
      }, 

      { 
       test: /\.json$/, 
       loader: "json" 
      }, 

      { 
       test: /\.(ttf|eot|svg|otf)(\?\S+)?$/, 
       loader: "file?name=[name]-[hash:7].[ext]" 
      }, 

      { 
       test: /\.(png)$/, 
       loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/png" 
      }, 

      { 
       test: /\.(gif)$/, 
       loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/gif" 
      }, 

      { 
       test: /\.(jpg)$/, 
       loader: "url?limit=8192&name=[name]-[hash:7].[ext]&mimetype=image/jpeg" 
      }, 

      { 
       test: /\.woff(2)?(\?\S+)?$/, 
       loader: "url?name=[name]-[hash:7].[ext]&limit=8192&minetype=application/font-woff" 
      }, 

      { 
       test: /\.html$/, 
       exclude: `${path.join(__dirname, "/app/index.html")}`, 
       loaders: [`ngtemplate?relativeTo=${__dirname}`, "html"] //html?attrs[]=div:ng-include 
      } 
     ] 
    }, 

    postcss: function() { 
     return [require('autoprefixer')]; 
    }, 

    devServer: { 
     contentBase: "./app", 
     noInfo: false, 
     hot: true, 
     inline: true, 
     historyApiFallback: true 
    } 
}; 

module.exports = webpackConfig; 

したがって、バグが比較的悪い文書化されfileLoaderとngtemplateLoder、に関連しているので、私はここに助けを求めています。

Answer 1

問題は解決されました。

テンプレートの問題は、私がrequireをソースコードに入れていなかったことに関連していました.Webpack devolopmentサーバーがローカルからフォルダからサービスを提供していたようです（これは私にとって非常に奇妙です）。とにかく、私がrequireを書いた後、それらはバンドルに追加され、利用可能になりました。 ngTemplateLoaderのドキュメントを読んでください - これを行う方法の例があります。フォントに複製されたパスに問題がときstatic/a.css輸入static/b.cssように私は、スラッシュでpublicPathを起動しなかったという事実によって引き起こされた

、ブラウザは相対パスとして解釈し、static/static/b.cssを探します。スラッシュを追加して問題を解決しました。