1

How can I configure extract-text-webpack-plugin to generate source maps when devtools config option is set to any value containing "source-map" (not only exact match)?

kirschpirogge
  • 357
  • 4
  • 12

1 Answers1

2

You should do vice versa. Something like this will definitely work. Just configure with SCSS/LESS if required.

var DEBUG_MODE = process.env.NODE_ENV !== 'production';

module.exports = {
   ...
   devtool: DEBUG_MODE ? 'cheap-source-map' : 'source-map'
   ...
   module: {
          loaders: [
            { 
              test: /\.css$/, 
              loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
Ravi Roshan
  • 1,177
  • 2
  • 11
  • 28
  • Thanks! But this not exactly what I'm trying to achieve: I'd like ExtractTextPlugin to generate source maps both for dev and for prod. For dev we have 'devtool' set to 'cheap-source-map' and for prod it is set to 'source-map'. So when I'm running dev configuration the CSS source maps are empty. – kirschpirogge Jan 27 '17 at 15:02
  • @kirschpirogge : I have updated the solution for your req. devtool: DEBUG_MODE ? 'cheap-source-map' : 'source-map' – Ravi Roshan Jan 27 '17 at 15:06
  • Ok, cool! But when 'devtool' is set to 'cheap-source-map' then ExtractTextPlugin doesn't generate source maps for CSS. Can it be configured somehow to generate them? – kirschpirogge Jan 27 '17 at 15:21
  • @kirschpirogge : If you want a separate file, then use source-map. You can refer here for in further details : http://cheng.logdown.com/posts/2016/03/25/679045 Also, if the above answer helped you, then just mark that as Accepted/Upvote. – Ravi Roshan Jan 27 '17 at 18:32
  • Downvoted because as mentioned in this [official docs](https://github.com/webpack-contrib/extract-text-webpack-plugin), ExtractTextPlugin only works with devtool: "source-map" setting. – Dinh Tran Jun 12 '17 at 03:44