Going to webpack v2!

README.md

@@ -5,11 +5,11 @@ Font Awesome configuration and loading package for webpack, using font-awesome (
 
 Based on [font-awesome-webpack](https://github.com/gowravshekar/font-awesome-webpack) by [Gowrav Shekar](https://github.com/gowravshekar) ([@gowravshekar](https://www.npmjs.com/~gowravshekar)) and [bootstrap-sass-loader](https://github.com/shakacode/bootstrap-sass-loader/) by [Shaka Code](https://github.com/shakacode) ([@justin808](https://www.npmjs.com/~justin808)).
 
-Version 1!
+Version 2!
 ----------
 
-The version 1 of font-awesome-sass-loader is only compatible with webpack v1.
-If you want to use another version of webpack, please check the [master branch](https://github.com/francisbesset/font-awesome-sass-loader).
+The version 2 of font-awesome-sass-loader is only compatible with webpack v2.
+If you use the version 1 of webpack, please check the [v1 branch](https://github.com/francisbesset/font-awesome-sass-loader/tree/v1).
 
 Usage
 -----
@@ -19,11 +19,22 @@ To properly load font-awesome fonts, you need to configure loaders in your `webp
 ``` javascript
 module.exports = {
   module: {
-    loaders: [
+    rules: [
       // the url-loader uses DataUrls.
       // the file-loader emits files.
-      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
-      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        options: {
+          limit: 10000,
+          mimetype: 'application/font-woff'
+        }
+      },
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [
+          { loader: 'file-loader' }
+        ]
+      }
     ]
   }
 };
@@ -106,13 +117,13 @@ $fa-border-color: #ddd;
 
 ### extract-text-webpack-plugin
 
-Configure style loader in `font-awesome-sass.config.js`.
+Configure extractStyles in `font-awesome-sass.config.js`.
 
 Example:
 
 ``` javascript
 module.exports = {
-  styleLoader: require("extract-text-webpack-plugin").extract("style-loader", "css-loader!sass-loader"),
+  extractStyles: true,
 
   styles: {
     ...
@@ -121,3 +132,13 @@ module.exports = {
 ```
 
 Install `extract-text-webpack-plugin` before using this configuration.
+
+### Custom style loaders
+
+Example:
+
+``` javascript
+module.exports = {
+  styleLoaders: ["style-loader", "css-loader", "sass-loader"],
+};
+```

examples/extract-css/font-awesome.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!sass-loader'),
+  extractStyles: true,
 
   styles: {
     "mixins": true,

examples/extract-css/package.json

@@ -8,14 +8,14 @@
   "dependencies": {
     "css-loader": "*",
     "style-loader": "*",
-    "extract-text-webpack-plugin": "^1",
+    "extract-text-webpack-plugin": "^2",
     "file-loader": "*",
     "font-awesome": "^4.6.0",
     "font-awesome-sass-loader": "^1.0",
     "node-gyp": "*",
     "node-sass": "*",
     "sass-loader": "*",
     "url-loader": "*",
-    "webpack": "^1"
+    "webpack": "^2"
   }
 }

examples/extract-css/webpack.config.js

@@ -1,21 +1,42 @@
+const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   entry: {
-    'font-awesome': 'font-awesome-sass!./font-awesome.config.js',
+    'font-awesome': 'font-awesome-sass-loader!./font-awesome.config.js',
   },
   output: {
-    path: './public/assets',
+    path: path.resolve(__dirname, 'public', 'assets'),
     publicPath: '/assets/',
     filename: '[name].js',
   },
+  plugins: [
+    new ExtractTextPlugin({
+      filename: '[name].css',
+      disable: false,
+      allChunks: true,
+    }),
+  ],
   module: {
-    loaders: [
-      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
-      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' },
+    rules: [
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+              mimetype: 'application/font-woff',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [
+          { loader: 'file-loader' },
+        ],
+      },
     ],
   },
-  plugins: [
-    new ExtractTextPlugin("[name].css"),
-  ],
 };

font-awesome-sass.config.js

@@ -1,9 +1,9 @@
 module.exports = {
   // Default for the style loading
-  //styleLoader: "style-loader!css-loader!sass-loader",
+  //styleLoaders: ["style-loader", "css-loader", "sass-loader"],
 
   // If you want to use the ExtractTextPlugin
-  //styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!sass-loader'),
+  //extractStyles: true,
 
   // Use fontAwesomeCustomizations to utilize other sass variables defined in
   // _variables.scss file. This is useful to set one customization value based

index.loader.js

@@ -5,15 +5,22 @@ module.exports.pitch = function (remainingRequest) {
 
   if (!configFilePath || configFilePath.trim() === '') {
     var msg = 'You specified the font-awesome-sass-loader with no configuration file. Please specify' +
-      ' the configuration file, like: \'font-awesome-sass!./font-awesome-sass.config.js\' or use' +
+      ' the configuration file, like: \'font-awesome-sass-loader!./font-awesome-sass.config.js\' or use' +
       ' require(\'font-awesome-sass-loader\').';
     console.error('ERROR: ' + msg);
     throw new Error(msg);
   }
 
   var config = require(configFilePath);
-  var styleLoader = config.styleLoader || 'style-loader!css-loader!sass-loader';
 
-  return 'require(' + JSON.stringify('-!' + styleLoader + '!' +
+  var styleLoaders = config.styleLoaders || ['style-loader', 'css-loader', 'sass-loader'];
+  if (config.extractStyles) {
+    styleLoaders = [
+      require('extract-text-webpack-plugin').loader().loader + '?{"omit":1,"remove":true}',
+      styleLoaders.join('!'),
+    ];
+  }
+
+  return 'require(' + JSON.stringify('-!' + styleLoaders.join('!') + '!' +
     require.resolve('./font-awesome-sass-styles.loader.js') + '!' + configFilePath) + ');';
 };