Webpack: Bundle required css files - css

Question

Being a newbie to Webpack, I'm following the discussion: Recomended way to require CSS in webpack by:
Configuring my Webpack configurations with
{
test: /(\.css|\.scss)$/,
loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'],
},
Requiring css files in my code:
require('./style1.css');
require('./style2.css');
But the two css files above will not be bundled together. How to instruct Webpack to bundle all required css files?

Answer 1

By default webpack will not bundle your css, it will create inline style tag in HTML and place your css there. For extract all your css and bundle into one css file you nee extract text plugin
for webpack 2
npm install --save-dev extract-text-webpack-plugin
for webpack 1
npm install --save-dev extract-text-webpack-plugin#1.0.1
In webpack 2
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
Webpack 1
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
Read more https://github.com/webpack-contrib/extract-text-webpack-plugin

Answer 2

As I saw in your Webpack configuration entires, you are instructing Webpack to bundle your css files inject then as inline css by using css-loader and style-loader.The css-loader takes a CSS file and reads off all its dependencies whilst the style-loader will embed those styles directly into the markup as tag in the of the document.
Personally, just to keep things clean, I’d prefer to have a separate CSS file rather than adding all the code inline. To do that we’ll need to use a Webpack plugin called extract-text-webpack-plugin which moves every require('style.css') in entry chunks into a separate css output file. We have to install that with npm:
for webpack 2
npm install --save-dev extract-text-webpack-plugin
for webpack 1
npm install --save-dev extract-text-webpack-plugin#1.0.1
Now we can update our webpack.config.js file again by requiring it and placing our CSS loader into it:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src',
output: {
path: 'build',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js/,
loader: 'babel',
include: __dirname + '/src',
},
{
test: /\.css/,
loader: ExtractTextPlugin.extract("css")
}
],
},
plugins: [
new ExtractTextPlugin("styles.css")
]
};
it then creates a styles.css file for us! We can now add this stylesheet file in the
<link rel="stylesheet" href="build/styles.css">