Structure for using Grunt and Webpack

Question

I have a typical setup for Webpack like this:

// webpack.config.js    
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: "./entry.js",
    output: {
        path: "./build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
                { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css', {
            allChunks: true
        })
    ]
};

But I still want to use Grunt to run my builds so I'm trying to call Webpack from a Grunt task and so have moved all the settings into Grunt like this:

// webpack.js - This is a grunt task being loaded into gruntfile.js    
module.exports = {
    entry: "./entry.js",
    output: {
        path: "./build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
                { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css', {
            allChunks: true
        })
    ]
    };

The obvious issue now is when I run grunt build it doesn't recognise the reference to ExtractTextPlugin. So where do I declare this now that I can't use webpack.config?

If I'm going about this all wrong then please let me know, as I'm just learning Webpack.

Answer 1

您只需要自己要求它：

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