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

我一直在試圖理解webpack中的「生產模式」。從我現在在webpack 2中你可以運行webpack -p，但這並不像功能豐富。我的設置，我從1的WebPack結轉是像這樣：如何在我的webpack設置中使用'extract-text-plugin'

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

來源

2017-02-27 Auzy

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/ 
},

來源

2017-02-27 22:22:41

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

回答

相關問題