How to specify multiple loaders in Webpack plugin? - css

Question

My Webpack config contains the following loaders.
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
]
},
Then, I wished to pull out the CSS to a separate file and I tried using the extract text webpack plugin, alternating my config like this.
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
// { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract(
{
loaders: ["css-loader", "sass-loader"],
fallbackLoader: "style-loader"
}
),
exclude: /node_modules/
}
]
},
plugins: [new ExtractTextPlugin("global.css")],...
However, it fails with. Probably due me not specifying the loaders correctly. How can I specify multiple loaders (one for SASS and one for CSS)?
Module not found: Error: Cannot resolve module '[object Object]' in C:\Source\Poc\TestProj
# ./index.js 7:14-38
I've checked the file index.js but I can't see anything wrong there. It's literally empty export, as shown below. And the reference to 7:14-38 says nothing to me. There aren't that many lines in the file, even...
import CssGlobal from "./global.sass";
//document.write("Banana!");
export default {}

Answer 1

This syntax for ExtractTextPlugin.extract() only works in webpack2 and above, apparently (an object as argument). Check this issue.
In order to make it work with webpack1, the syntax is:
ExtractTextPlugin.extract([notExtractLoader], loader, [options])`
notExtractLoader (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when allChunks:
false)
loader the loader(s) that should be used for converting the resource to a css exporting module.
Source: https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md
So, a working config file would be:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
/* ... */
module : {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
/* using ExtractTextPlugin.extract(["css","sass"]) works too */
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
This will genereate a styles.css file.

Answer 2

Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.
For example, you can use loaders to tell webpack to load CoffeeScript or JSX.
Nicely Explained here
http://ui-codeman.blogspot.in/2017/02/webpack.html?view=sidebar