Webpack-Schriftarten und -Templates respektieren publicPath nicht - was ist los mit Loadern?

Question

Ich habe erfolgreich ein Frontend der Website mit Webpack-dev-Server entwickelt.

Jetzt möchte ich Webpack Bundle von /static Ordner meines Produktionsservers dienen. Zu diesem Zweck habe ich die webpack Konfiguration wie folgt geändert:

output.publicPath = "static/" 

Mein JavaScript- und CSS-Bundles werden nun in geeigneter Weise aus /static/app.<hash>.js und /static/app.<hash>.css Standorten bedient bzw. (so, HtmlWebpackPlugin und ExtractTextWebpackPlugin reagierte in Ordnung).

Aber HTML-Vorlagen und Schriftarten verhalten sich seltsam und scheinen die publicPath Einstellung zu ignorieren oder falsch zu interpretieren.

HTML-Vorlagen werden ohne Präfix, z. B. static/, referenziert. https://example.com/components/header/header.html.

Fonts werden mit DOUBLE das Präfix verwiesen, z. https://example.com/static/static/fontawesome-webfont-db812d8.woff2.

Wie für Standorte dieser Vermögenswerte auf physischen Rechner: Ich Inline-HTML-Vorlagen im Javascript-Bundle (app.<hash>.js) als CommonJS-Module. Ich stelle Schriftarten als separate Dateien in /static Ordner meiner Website, und sie sind sogar unter richtigen URLs https://example.com/static/fontawesome-webfont-db812d8.woff2.

Hier ist mein volle webpack.config.js für die Produktion:

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; 

Somit werden Fehler im Zusammenhang mit fileLoader und ngtemplateLoder, die relativ schlecht dokumentiert sind, so dass ich um Hilfe zu bitten hier.

Answer 1

Die Probleme sind gelöst.

Das Problem mit Vorlagen war mit der Tatsache, dass ich nicht in den Quellcode require und scheinbar (das ist sehr seltsam für mich) Webpack Devolpment-Server diente sie lokal von Ordnern. Wie auch immer, nach I require d sie wurden dem Bündel hinzugefügt und verfügbar. Lesen Sie die Dokumentation von ngTemplateLoader - es gibt ein Beispiel dafür.

Das Problem mit duplizierten Pfad zu Schriftart wurde durch die Tatsache, dass ich nicht die publicPath mit Schrägstrich, so dass, wenn static/a.css Importe static/b.css, Browser interpretiert es als relativen Pfad gestartet wurde und sucht nach static/static/b.css. Gerade hinzugefügt der führende Schrägstrich und Problem wurde gelöst.