Как использовать «extract-text-plugin» в моей настройке веб-пакета

Я пытался понять «режим производства» в webpack. Из того, что я сейчас понимаю, в 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

webpack webpack-2 extract-text-plugin
person Auzy    schedule 27.02.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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/
},
person Michael Jungo    schedule 27.02.2017