weisk
2/15/2015 - 4:05 AM

webpack + font-awesome test

webpack + font-awesome test

webpack.config.js
content_copyfile_download
var config = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }
};

module.exports = config;
package.json
content_copyfile_download
{
  "name": "webpack-font-awesome-test",
  "version": "1.0.0",
  "author": "Tobias Bieniek <tobias.bieniek@qsc.de>",
  "scripts": {
    "dev": "webpack -d",
    "dist": "webpack -p"
  },
  "dependencies": {
    "font-awesome": "^4.3.0"
  },
  "devDependencies": {
    "css-loader": "^0.9.1",
    "file-loader": "^0.8.1",
    "style-loader": "^0.8.3",
    "url-loader": "^0.5.5",
    "webpack": "^1.5.3"
  }
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Webpack Test</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>
app.js
content_copyfile_download
require('font-awesome/css/font-awesome.css');

document.body.innerHTML = '<i class="fa fa-fw fa-question"></i>';