Font Awesome + Webpack
Open source hacker. Community organizer. Co-organizer @ReactRally. Software Sommelier.
I recently got Font Awesome working with Webpack, but it wasn't as straight forward as I had expected. I did a lot of Googling, and found lots of proposed solutions, but none of them worked for me. I thought I would share what ended up working for the sake of anyone else trying to figure this out.
index.js
require('font-awesome/css/font-awesome.css');
var container = document.getElementById('container');
container.innerHTML = '<i class="fa fa-twitter"></i>';
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Font Awesome + Webpack</title>
<link rel="stylesheet" type="text/css" href="/bundle.css"/>
</head>
<body>
<p id="container"></p>
<script src="/bundle.js"></script>
</body>
</html>
package.json
{
"scripts": {
"start": "webpack-dev-server --inline --content-base ./"
},
"devDependencies": {
"css-loader": "^0.21.0",
"extract-text-webpack-plugin": "^0.9.0",
"file-loader": "^0.8.4",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"font-awesome": "^4.4.0"
}
}
webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
},
{
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url'
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
};
Open source hacker. Community organizer. Co-organizer @ReactRally. Software Sommelier.
