獲取引導Glyphicons用的WebPack

Question

我想用工作來的WebPack加載引導。 CSS工作得很好，但圖形似乎通過顯示一個正方形來打破（見下文）。無控制檯錯誤

module.exports = { 
 
    entry: "./public/app/main.js", 
 
    output: { 
 
     path: __dirname + '/public/dist/', 
 
     filename: "bundle.js" 
 
    }, 
 
    module: { 
 
     loaders: [ 
 
      { 
 
       test: /\.css$/, 
 
       loader: "style-loader!css-loader" 
 
      }, 
 
      { 
 
       test: /\.less$/, 
 
       loader: "style!css!less" 
 
      }, 
 
      { 
 
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
       loader: "url-loader?limit=10000&mimetype=application/font-woff" }, 
 
      { 
 
       test: /\.(ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
       loader: "url-loader?limit=10000&mimetype=application/octet-stream" 
 
      }, 
 
      { 
 
       test: /\.(eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
       loader: "file" 
 
      }, 
 
      { 
 
       test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
       loader: "url-loader?limit=10000&mimetype=image/svg+xml" 
 
      }, 
 

 
     ] 
 
    }, 
 
    node: { 
 
     fs: "empty" 
 
    } 
 
};

<i class="done-icon glyphicon glyphicon-ok"></i>

Answer 1

可能錯字：minetype應該是mimetype您woff文件測試。

MIME類型也從擴展推斷我不知道你需要提供它。

我唯一的猜測（不知道關於Twitter的引導，如果錯字不解決任何事情）是你的正則表達式可能不會配合那麼你可以試試：

/\.(svg|woff|ttf|eot)(\?v=.*)?$/i

我認爲這是可能一個更寬容的測試，並允許您使用一個測試，而不是許多。

Answer 2

試試這個：

loaders: [ 
    { 
    test: /\.css$/, 
    loader: 'style-loader!css-loader' 
    }, 
    { 
    test: /\.png$/, 
    loader: 'url-loader?limit=100000' 
    }, 
    { 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
    }, 
    { 
    test: /\.(ttf|otf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?|(jpg|gif)$/, 
    loader: 'file-loader' 
    } 
] 

和你的JavaScript（假設NPM和模塊）：

import 'bootstrap/dist/css/bootstrap.css'; 
import 'bootstrap/dist/css/bootstrap-theme.css'; 

只是擡起頭說的WebPack是打算把字體文件在同一目錄下bundle.js文件，因此你可能需要確保您的index.html文件也複製到您的dist文件夾，以便路徑引用是否正確。