gowravshekar / bootstrap-webpack

bootstrap package for webpack
MIT License
135 stars 22 forks source link

extract-text-webpack-plugin loader usage without plugin error #24

Closed dpwrussell closed 8 years ago

dpwrussell commented 8 years ago

Hi,

I have configured bootstrap.config.js like so:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
  scripts: {
...
  },
  styles: {
...
  }
};

and my main webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = [
  // Client build
  {
...
  },

  // Server build
  {
    plugins: [
      new ExtractTextPlugin("styles.css")
    ],
    entry: ['bootstrap-webpack!./bootstrap.config.js','./server/server.jsx'],
    target: 'node',
    node: {
      console: false,
      global: false,
      process: false,
      Buffer: false,
      __filename: false,
      __dirname: false,
    },
    output: {
      path: './dist',
      filename: 'server.js',
    },
    module: {
      loaders: [
        {
          test: /\.jsx$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['react', 'es2015', 'stage-0']
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            plugins: ['transform-runtime'],
            presets: ['es2015', 'stage-0']
          }
        },
        {
          test: /\.json$/,
          loader: 'json-loader'
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract("css-loader")
        },
        {
          test: /\.png$/,
          loader: "url-loader?limit=100000"
        },

        // Bootstrap
        {
          test: /\.(woff|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'
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    }
  }
];

This actually works fine and the outputted styles.css file includes my own CSS, plus the bootstrap CSS. However, there is an error thrown during compilation:

    ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./bootstrap.config.js
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.module.exports.pitch (/Users/dpwrussell/Checkout/ExampleApp/node_modules/extract-text-webpack-plugin/loader.js:21:9)
     @ ./~/bootstrap-webpack/index.loader.js!./bootstrap.config.js 1:0-400
gowravshekar commented 8 years ago

https://github.com/webpack/extract-text-webpack-plugin/issues/50