webpack: difference between style-loader and css-loader

                                              i was doing webpack and wanted to add a css file to a page and so i went through the webpack way and wanted to implement this feature via webpack loader. There are basically two webpack loader both are used to together to accomplish this task

1.  First is style-loader 
2. Second is css-loader

This is my webpack.config.js file contents

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

module.exports = { entry: './src/main.js', output: { path: 'build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel', query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] } };

Here i used the 'style-loader!css-loader' (! represents pipe here) on line 19. The css-loader takes a css file and returns the css with imports and url(...) resolved & style-loader takes that css from css-loader ( reason they are linked via a pipe which is represented via ! on line number 19 ) and inserts it into the page so that styles are active on the page.