webpack4打包css的问题

Question

我有两个less文件，分别为index.less , index1.less
我想打包完后也能输出index.css，index1.css
目前代码是这样的：

//webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    index : './src/index.js',
    index1 : './src/index1.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      "@": "./packages",
    },
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new MiniCssExtractPlugin({
      filename: "theme/[name].css",
      chunkFilename: "[id].css"
    }),
    new HtmlWebPackPlugin({
      template: "./index.html",
      filename: "index.html"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          "css-loader","less-loader"
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            //options: { minimize: true }
          }
        ]
      }
    ]
  }
};

//index.js
import "../packages/index.less";

//index1.js
import "../packages/index1.less";

打包后

|-dist
 |--theme
 |  |-index.css
 |  |-index1.css
 |--index.html
 |--index.js
 |--index1.js
 

这倒是实现了我的要的结果，但是我总不能加一个less，就加一个入口js吧，那我10个less，就10个入口js，这太傻了，请问有什么好的解决办法吗？
我想的是只有一个单入口js，打包完成后目录能是这样的

|-dist
 |--theme
 |  |-index.css
 |  |-index1.css
 |  |-index2.css
 |--index.html
 |--index.js

Answer 1

 import(/*webpackChunkName: 'less1' */'../packages/index.less')
 import(/*webpackChunkName: 'less2' */'../packages/index2.less')
 使用异步加载的方式设置webpackChunkName
 new MiniCssExtractPlugin({
      chunkFilename: "theme/[name].css"
    }),