如何在我的 webpack 设置中使用 'extract-text-plugin'

Question

我一直在尝试理解 webpack 中的 "production mode"。从我现在在 webpack 2 中收集到的信息，您可以运行 webpack -p 但这似乎功能并不丰富。我从 Webpack 1 继承下来的设置是这样的：

var config = {
context: __dirname + '/app',
entry: './index.js',
output: {
    path: __dirname + '/app',
    filename: 'bundle.js'
},
plugins: [
    new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
    }),
    new webpack.ProvidePlugin({
        moment: "moment"
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
],
module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.scss$/,
            loader: 'style-loader!css-loader!sass-loader',
            exclude: /node_modules/
        },
        {
            test: /\.html$/,
            loader: 'raw-loader',
            exclude: /node_modules/
        }
    ]
}
};

if (process.env.NODE_ENV === 'production') {
    config.output.path = __dirname + '/dist';
    config.plugins.push(new webpack.optimize.UglifyJsPlugin());
    config.plugins.push(new ExtractTextPlugin("styles.css"));
    config.module.loaders({
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "style-loader!css-loader!sass-loader"
        })
    })
}

module.exports = config;

我真正想要的是在生产模式下使用 extract-text-plugin，我尝试了以下操作：

if (process.env.NODE_ENV === 'production') {
    config.output.path = __dirname + '/dist';
    config.plugins.push(new webpack.optimize.UglifyJsPlugin());
    config.plugins.push(new ExtractTextPlugin("styles.css"));
    config.module.loaders({
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "style-loader!css-loader!sass-loader"
        })
    })
}

我收到以下错误：

config.loaders({
           ^
TypeError: config.loaders is not a function

Answer 1

config.module.loaders 是一个数组，因此您需要像使用插件一样进行推送。但是你最终会得到 .scss 的两个加载器配置，这显然不是你想要的。相反，您可以定义一个传递给配置的变量，如下所示：

// Default SCSS loader
var scssLoader = 'style-loader!css-loader!sass-loader';
if (process.env.NODE_ENV === 'production') {
  // Overwrite it with the extract-text loader
  scssLoader = ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "style-loader!css-loader!sass-loader"
  })
}

然后您配置中的 .scss 规则将变为：

{
  test: /\.scss$/,
  loader: scssLoader,
  exclude: /node_modules/
},

如何在我的 webpack 设置中使用 'extract-text-plugin'

How to use 'extract-text-plugin' in my webpack setup

webpack

webpack-2

extract-text-plugin