title: Webpack 3.9.1 - How do I combine LESS files into one CSS file?
body: <p>I'm very new to Webpack and I'm not certain how to handle LESS. I want to have many LESS files and I want them to compile into one CSS file after I run <code>npm run build</code>. This would result in a <code>style.css</code> file which includes everything.</p>
  
  <p>My <code>webpack.config.js</code> looks like this:</p>
  
  <pre><code>const HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  const webpack = require('webpack');
  
  module.exports = {
      entry: './src/index.js',
      output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
      },
      module: {
          rules: 
          [
              {
                  test: /\.css$/,
                  use: [
                      'style-loader',
                      'css-loader'
                  ]
              },
              {
                  test: /\.less$/,
                  use: [{
                      loader: "style-loader", // creates style nodes from JS strings
                      path: path.resolve(__dirname, 'src')
                  }, {
                      loader: "css-loader", // translates CSS into CommonJS
                      path: path.resolve(__dirname, 'src')
                  }]
              },
              {
                  test: /\.(png|svg|jpg|gif)$/,
                  use: [
                      'file-loader'
                  ]
              },
              {
                  test: /\.json$/,
                  loader: 'json-loader'
              }
          ]
  
      },
      plugins: [new HtmlWebpackPlugin()]
  };
  </code></pre>
  
  <p>How exactly do I configure webpack to make it combine all LESS files into one CSS file?</p>