javascript - 使用 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");