不能定制特定的网址只为网址加载器在webpack 2

Question

TL;DR，font-awesome css不能正确地显示在我的博客上，因为我不能只做一个字体很棒的css、my blog online address 和github address的url。

我在github页面上创建了一个博客，用pug来转换html，用手写笔来转换CSS，还有小ts，然后用webpack + gulp来构建，一切都还好，但是很棒的css url是错的，我用的是webpack-2和gulp-4。

关于非常棒的css在webpack中的配置是

...
  output: {
    path: PATHS.bin,
     //publicPath: '{{site.baseurl}}',
   // use / to show awesome css icon
    publicPath: '/',
    filename: debug ? 'js/[name].js' : 'js/[name]-[hash:8].js'
  },
...

...
  module: {
    rules: [
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use:[{ loader: 'url-loader',
          options: {
            limit:'10000',
            mimetype:'application/font-woff',
            //name:'fonts/[name].[ext]?[hash:8]'
            name:'fonts/[name].[ext]?[hash:8]'
          }
        } ]
      }, {

...

博客文件结构是

.
├── about
│   └── index.md
├── _config.yml
├── credits
│   └── index.md
├── css
│   ├── commons.css
│   ├── commons.css.map
│   ├── index.css
│   ├── index.css.map
│   ├── pages.css
│   └── pages.css.map
├── favicon.ico
├── fonts
│   ├── fontawesome-webfont.eot
│   ├── fontawesome-webfont.svg
│   ├── fontawesome-webfont.ttf
│   ├── fontawesome-webfont.woff
│   └── fontawesome-webfont.woff2
├── Gemfile
├── Gemfile.lock
├── gulpfile.js
├── images
│   └── shangwenlong-wechat.png
├── _includes
│   ├── articles.html
│   ├── disqus.html
│   ├── pagination.html
│   └── sidebar.html
├── index.html
├── Jenkinsfile
├── js
│   ├── commons.js
│   ├── commons.js.map
│   ├── index.js
│   ├── index.js.map
│   ├── pages.js
│   └── pages.js.map
├── jsconfig.json
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── LICENSE
├── media
├── node_modules
├── package.json
├── _posts
│   ├── 2016-07-07-webpack-for-jekyll.md
│   ├── 2016-08-13-gemfile-requires-error.md
│   ├── 2016-10-07-mongoose-arrowFunction-bug.md
│   ├── 2016-12-03-gulp-watch-problem.md
│   ├── 2016-12-04-pug-loader-problem.md
│   ├── 2016-12-05-github-pages-problem.md
│   ├── 2016-12-24-min-height-does-not-work-in-qq-browser.md
│   └── 2017-03-01-reactjs-improvements.md
├── README.md
├── _site
│   ├── about
│   ├── blog
│   ├── credits
│   ├── css
│   ├── favicon.ico
│   ├── fonts
│   ├── Gemfile
│   ├── Gemfile.lock
│   ├── images
│   ├── index.html
│   ├── Jenkinsfile
│   ├── js
│   ├── jsconfig.json
│   ├── LICENSE
│   ├── page2
│   ├── README.md
│   ├── src
│   ├── static
│   ├── test
│   ├── tsconfig.json
│   └── webpack.config.js
├── src
│   ├── css
│   ├── fonts
│   ├── _includes
│   ├── index.pug
│   ├── js
│   └── _layouts
├── static
│   └── highlight
├── struct.txt
├── test
│   └── index.html
├── tsconfig.json
└── webpack.config.js

很棒的css需要一个url在css是../fonts/xxxx，但它是/fonts/xxx，所以使它不能正确显示。

你可以看到，如果我只将publicPath改为使用../，那么其他的js和css将被错误地链接，但我不能只为awesome css做一个url，而不改变其他来源。帮帮忙~，非常感谢。

Answer 1

只需在ExtractTextPlugin中设置publicPath，它就可以覆盖全局输出ExtractTextPlugin

  /********* stylus to css*/
  {
    test: /\.(styl|css)$/,
    exclude: ['/node_modules/','/src/css/includes/'],
    use:ExtractTextPlugin.extract({
      fallback: 'style-loader',
      publicPath: '../',
      use:['css-loader','postcss-loader','stylus-loader']
    })  
  },