webpack Config für Bootstrap-Schriften in reagieren

Question

Ich habe folgendes in meinem webpack.config.js

module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
     } 
     }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"}, 
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
      { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }, 
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" } 
    ] 
    }, 
    output: { 
    path: __dirname + "/dist/", 
    filename: "bundle.js" 
    } 

Wenn ich meine App-Root-Zugriff und einfach über reagieren-Router die Schrift und Bilder für Bootstrap gut funktionieren navigieren. Wenn ich mich jedoch in einem Nicht-Root-Pfad befinde und den Browser aktualisiere, werden sie relativ zu diesem Pfad geladen. Also statt:

http://localhost:3000/fa2772327f55d8198301fdb8bcfc8158.woff 

werden sie geladen, wie:

http://localhost:3000/brands/fa2772327f55d8198301fdb8bcfc8158.woff 

das heißt, ich bin eine 404 für jede Ressource zu bekommen. Ich habe einige Nachforschungen angestellt, aber ich bin mir nicht sicher, was ich ändern muss, damit diese Ressourcen immer absolut aus dem Stammpfad geladen werden, egal was der App-Pfad ist.

Answer 1

Normalerweise beginnt meine webpack.config.js mit dem folgenden. Versuchen Sie, die output

module.exports = { 
    entry: [ 
     'webpack/hot/dev-server', 
     'webpack-hot-middleware/client', 
     './src/index', 
    ], 

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

    // .... YOUR OTHER CONFIG HERE .... 
} 

Hinzufügen und stellen Sie sicher, module.output.publicPath

Answer 2

ich meine loader Config für die ganze eot endete aufzunehmen ändern, woff, etc-Dateien:

{ 
    test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/, 
    loader: 'url?limit=100000@name=[name][ext]' 
} 

Ich bin nicht sicher, aber warum dies das Problem behob, aber ich forsche darüber. Wenn ich Einzelheiten herausfinde, werde ich auf diese Antwort zurückkommen.