在引导字体的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配置反应

回答

相关问题