Webpack: how to get chunks and common from less?

Question

Less

the most difficult tool to understand in all the time of work.
the logic of setting it up in the documentation is described disgustingly - there is not a logical case for a normal developer .... in general, there are only frustrations and torments and climbing on the Internet in search of bits of information. The
question is the following
, we have a config:

entry: {
        index: ['./client/src/js/index.js'],
        login: ['./client/src/js/login.js']
    },
    output: {
        path: './public',
        filename: '[name].js'
    },
    module: {
        loaders: [
            {test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less')},
            ....
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            minChunks: 2,
            name: 'common'
        }),
        new ExtractTextPlugin('css/[name].css')
    ]

and we have the code of two files for index.js and login.js:

import css from '../css/styles.less';
....

import css from '../css/login.less';
....

and the actual styles:

@import "~bootstrap/less/bootstrap";

body {
    background-color: lightgray;
}

@import "~bootstrap/less/bootstrap";

body {
  color: black;
}

so this config generates for me two style files index.css and login.css which include the full bootstarp, although the scripts are generated correctly - 2 files for entries and one common file containing common files
If you remove .less and replace with .css files and replace

{test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less')},

on the

{test: /\.сss$/, loader: ExtractTextPlugin.extract('style', 'css')},

common.css is generated!
In general, I don’t understand much what all the words and letters in this config do, although I read all the documentation
. Please help me figure out why common.css is not generated?

Answer 1

Тут проблема в том что LESS при написании @import сам импортит css-файл, а только потом это попадает в webpack. Тут нужен другой подход, в вашем entry нужно импортить все css зависимости по отдельности, чтобы они обрабатывались webpack'ом.

Answer 2

AZaz1
Решилась ли как-нибудь проблема?
С CSS у меня, кстати, проблема остаётся, результаты примерно такие:
Только css-loader, без ExtractTextPlugin - общие чанки попадают в common.bundle.js
css-loader и ExtractTextPlugin - общие чанки попадают и в index.css и в login.css
css-loader и less-loader - общие чанки попадают и в index.bundle.js и в login.bundle.js
css-loader, less-loader и ExtractTextPlugin - общие чанки попадают и в index.css и в login.css
arturkin
Может я чего-то не понимаю или за много лет всё изменилось, но документация less-loader'а говорит, что по умолчанию в less-файлах используется webpack резолвер импортов, но ситуацию это не спасает.