使用 Grunt 和 Webpack 的结构

Question

我有这样一个典型的 Webpack 设置：

// 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
        })
    ]
};

但我仍然想使用 Grunt 来运行我的构建，所以我尝试从 Grunt 任务中调用 Webpack，因此将所有设置移到 Grunt 中，如下所示：

// 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
        })
    ]
    };

现在明显的问题是，当我运行 grunt build 时，它无法识别对 ExtractTextPlugin 的引用。那么，既然我不能使用 webpack.config，我该在哪里声明呢？

如果我做错了，请告诉我，因为我刚刚学习 Webpack。

Answer 1

你只需要自己要求它：

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