Webpack - ExtractTextPlugin : No css file generated, no error - css

Question

I am trying to use the https://github.com/webpack-contrib/extract-text-webpack-plugin in order to get a mixed css file.
With my current situation, I have this :
As you can see, I have my js file, my fonts but no sign of css file ...
I tried several examples I found on their github issue or their documentation but still no result.
My package.json :
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env=dev --progress --watch --content-base src/app"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"postcss-cssnext": "^2.10.0",
"postcss-loader": "^2.0.1",
"postcss-modules-values": "^1.2.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"admin-lte": "git://github.com/almasaeed2010/AdminLTE.git#37c8bbb01998db487382e9d62cfb398511167f3a",
"bootstrap-daterangepicker": "git://github.com/dangrossman/bootstrap-daterangepicker.git#29bbf5a04df69fda363cedb534272ac344524e57",
"bootstrap-table": "^1.11.2",
"eonasdan-bootstrap-datetimepicker": "git://github.com/Eonasdan/bootstrap-datetimepicker.git#4.17.47",
"font-awesome": "^4.7.0",
"ionicons": "^3.0.0",
"jquery": "^3.2.1",
"jquery-confirm": "git://github.com/craftpip/jquery-confirm.git",
"lobibox": "git://github.com/arboshiki/lobibox.git",
"lodash": "^4.17.4",
"moment-timezone": "^0.5.13",
"parsleyjs": "^2.7.1",
"push.js": "0.0.13",
"socket.io-client": "^1.7.4",
"tableexport.jquery.plugin": "git://github.com/hhurz/tableExport.jquery.plugin.git"
}
}
My webpack.config.js :
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssPlugins = [
require('postcss-cssnext')(),
require('postcss-modules-values')
];
const scssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
];
const postcssLoader = [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } },
{ loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
];
// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
entry: {
app: './app.js',
// if any on these are just for css remove them from here and require(with absolute path) them from app.js
vendor: [
'babel-polyfill',
'admin-lte',
'admin-lte/bootstrap/js/bootstrap.min.js',
'lobibox/dist/js/notifications.min.js',
'admin-lte/plugins/fastclick/fastclick.js',
'moment',
'moment/locale/fr.js',
'moment-timezone',
'eonasdan-bootstrap-datetimepicker',
'bootstrap-table',
'bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js',
'parsleyjs',
'parsleyjs/dist/i18n/fr.js',
'bootstrap-daterangepicker',
'socket.io-client',
'jquery-confirm',
'push.js',
'lodash',
'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
'tableexport.jquery.plugin'
]
},
//devtool: 'eval', // for test in the browser
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')//,
//pathinfo: true
},
module: {
rules: [{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.html$/,
use: ['raw-loader', 'html-minifier-loader'],
exclude: /node_modules/
}, {
test: /\.json$/,
use: 'json-loader',
exclude: /node_modules/
}, {
test: /\.(scss|sass)$/,
loader: ExtractTextPlugin.extract(scssLoader),
include: [__dirname]
},{
test: /\.css$/,
loader: postcssLoader,
include: [__dirname]
}, {
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
}, {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}],
},
plugins: [
new ExtractTextPlugin("app.bundle.css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
};
My app.js (only several require and a console.log for test) :
console.log("coucou");
require('admin-lte/dist/css/skins/skin-blue.min.css');
require('admin-lte/dist/css/AdminLTE.min.css');
require('jquery-confirm/dist/jquery-confirm.min.css');
require('bootstrap-table/dist/bootstrap-table.min.css');
require('bootstrap-daterangepicker/daterangepicker.css');
require('eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css');
require('admin-lte/plugins/select2/select2.min.css');
require('lobibox/dist/css/lobibox.min.css');
require('ionicons/dist/css/ionicons.min.css');
require('font-awesome/css/font-awesome.min.css');
require('admin-lte/bootstrap/css/bootstrap.min.css');

Answer 1

There is a typo in the documentation. I think the problem is the definition on plugings. Try that:
new ExtractTextPlugin({
filename: 'app.bundle.css',
allChunks: true
}),