How to connect less to webpack?

Question

WordPress

Tell me how to generate css from less using webpack. I use Extract Text Plugin.

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLess = new ExtractTextPlugin('public/stylesheets/style.css');

module.exports = {
    entry:  './public/javascripts/index.js',
    output: {
      filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.less$/i,
            loader: extractLess.extract(['css-loader', 'less-loader'])
        }]
    },
    plugins: [
        extractLess
    ]
};

This output to the console:
Hash: 0bd4f09244f0e8c60354
Version: webpack 3.5.5
Time: 69ms
Asset Size Chunks Chunk Names
bundle.js 2.47 kB 0 [emitted] main
[0] ./public/javascripts/index.js 0 bytes {0} [ built]

Answer 1

You first need to determine the current language. To do this, at the top of the file, insert Next, what you need to be displayed depending on the current language:

$my_lang = pll_current_language();  
if ( $my_lang == 'en' ) { 
echo 'тут какой то контент';
} else {
echo 'тут какой то контент';
 }
?>

I already wrote instructions on how to do it here

Answer 2

Webpack 2/3 ?

...
const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
// в секции plugins
plugins: [
...
new ExtractTextPlugin({
      filename: 'style-[contenthash].css',
      disable: false,
      allChunks: false, // true
    }),
...
]

в секции module -> rules (loaders)
...
{
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: ['css-loader', 'less-loader'],
          publicPath: '/public', // ваш publicPath
        }),
      },