ExtractTextPlugin

[marcelloromanelli]

Hi, I'm trying to extract the generated CSS using the extract-text plugin.

In order to understand what's going on I've setup a simple test project. The webpack.config.js looks like this:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var fontgen = require('fontgen-loader');

var cssExtractTextPlugin = new ExtractTextPlugin(1, "style/[name]-[hash].css");

module.exports = {
  entry: "./js/main.js",
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'scripts/[name]-[hash].js',
    // publicPath: '/scripts/'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: cssExtractTextPlugin.extract("style", "css")
      },
      {
        test: /\.font\.(js|json)$/,
        loader: "style!css!fontgen"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    cssExtractTextPlugin
  ]
};

This configuration works perfectly fine and it generates the svg, ttf, eot and woff files. However if I modify the above config and I introduce the extract plugin (see below) I get the follwing error: Module build failed: CssSyntaxError: /css-loader!/Users/marcello/Desktop/webfonts/fonts/tutti.font.js:5:26: Missed semicolon

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var fontgen = require('fontgen-loader');

var cssExtractTextPlugin = new ExtractTextPlugin(1, "style/[name]-[hash].css");
var fontsExtractTextPlugin = new ExtractTextPlugin(1, "fonts/[name]-[hash].css");

module.exports = {
  entry: "./js/main.js",
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'scripts/[name]-[hash].js',
    // publicPath: '/scripts/'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: cssExtractTextPlugin.extract("style", "css")
      },
      {
        test: /\.font\.(js|json)$/,
        loader: fontsExtractTextPlugin.extract("style", "css", "fontgen")
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    cssExtractTextPlugin,
    fontsExtractTextPlugin
  ]
};

Any idea what could be wrong in my setup? I'm fairly new to webpack so forgive me if I'm doing something totally nonsense.

[lgringo]

Hello,

Try with : loader: fontsExtractTextPlugin.extract("style", ["css", "fontgen"])

[marcelloromanelli]

Thanks for the help @lgringo