在引導字體的WebPack配置反應

我在webpack.config.js在引導字體的WebPack配置反應

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" 
    }

下面當我進入我的應用程序的根，只需導航通過反應路由器的字體和圖像引導的工作就好了。但是，如果我處於非根路徑並刷新瀏覽器，則會相對於該路徑加載它們。因此，而不是：

http://localhost:3000/fa2772327f55d8198301fdb8bcfc8158.woff

它們加載爲：

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

這意味着我得到一個404的每個資源。我一直在做一些研究，但我不確定可能需要更改哪些內容，以便無論應用程序路徑是什麼，這些資源都始終從根路徑加載。

來源

2016-09-12 Gregg

你是如何加載引導CSS文件？ – JorgeObregon

由於css和sass加載器，它被加載爲捆綁包的一部分。通過javascript注入。 – Gregg

如果有人有任何建議，我完全打開以不同的方式加載它。 – Gregg

通常我的webpack.config.js從以下開始。嘗試添加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 .... 
}

，並確保包括module.output.publicPath

來源

2016-09-12 16:28:13 JorgeObregon

我最終改變我的裝載機配置爲所有的EOT，WOFF等文件：

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

我不確定至於爲什麼這能解決問題，但我正在研究這個問題。如果我找出具體細節，我會回報給這個答案。

來源

2016-09-12 18:06:28 Gregg

在引導字體的WebPack配置反應

回答

相關問題