title: Webpack fonts and templates don't respect publicPath - what's wrong with loaders?
body: <p>I've successfully developed a frontend of website with Webpack-dev-server.</p>
  
  <p>Now, I want to serve webpack bundle from <code>/static</code> folder of my production server. For that end I've changed the webpack configuration as follows: </p>
  
  <pre><code>output.publicPath = "static/"
  </code></pre>
  
  <p>My javascript and css bundles are now appropriately served from <code>/static/app.&lt;hash&gt;.js</code> and <code>/static/app.&lt;hash&gt;.css</code> locations respectively (so, <code>HtmlWebpackPlugin</code> and <code>ExtractTextWebpackPlugin</code> responded fine).</p>
  
  <p>But html templates and fonts behave strangely and seem to ignore or misinterpret the <code>publicPath</code> setting.</p>
  
  <p>Html templates are referenced without <code>static/</code> prefix e.g. <code>https://example.com/components/header/header.html</code>.</p>
  
  <p>Fonts are referenced with DOUBLE the prefix, e.g. <code>https://example.com/static/static/fontawesome-webfont-db812d8.woff2</code>.</p>
  
  <p>As for locations of these assets on physical machine: I inline html templates in the javascript bundle (<code>app.&lt;hash&gt;.js</code>) as CommonJS modules. I put fonts as separate files in <code>/static</code> folder of my site, and they are even available under correct urls <code>https://example.com/static/fontawesome-webfont-db812d8.woff2</code>.</p>
  
  <p>Here's my full <code>webpack.config.js</code> for production:</p>
  
  <pre><code>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=@@&amp;file=${environmentsFile}`]
              }
          ],
  
          loaders: [
              {
                  test: /[\/]angular\.js$/,
                  exclude: [nodeModulesPath],
                  loader: "exports?angular"
              },
  
              {
                  test: /\.js$/,
                  exclude: [nodeModulesPath, bowerComponentsPath],
                  loaders: ["ng-annotate", "babel?presets[]=es2015&amp;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&amp;name=[name]-[hash:7].[ext]&amp;mimetype=image/png"
              },
  
              {
                  test: /\.(gif)$/,
                  loader: "url?limit=8192&amp;name=[name]-[hash:7].[ext]&amp;mimetype=image/gif"
              },
  
              {
                  test: /\.(jpg)$/,
                  loader: "url?limit=8192&amp;name=[name]-[hash:7].[ext]&amp;mimetype=image/jpeg"
              },
  
              {
                  test: /\.woff(2)?(\?\S+)?$/,
                  loader: "url?name=[name]-[hash:7].[ext]&amp;limit=8192&amp;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;
  </code></pre>
  
  <p>Thus, bug is related to <code>fileLoader</code> and <code>ngtemplateLoder</code>, which are relatively poorly documented, so I'm asking for help here.</p>