Webpack 4 MiniCssExtractPlugin LESS to CSS - PullRequest
Новая
       43

Webpack 4 MiniCssExtractPlugin LESS to CSS

0 голосов
/ 03 сентября 2018

Я пытаюсь найти лучший способ компилировать меньше в css через webpack 4.

Ниже моя текущая рабочая версия.

Структура моего проекта: 

(source path)
-  source/
   -  styles/
      -  common.less
   -  scripts/
      -  index.js (here import '../styles/common.less')
      -  test.js

(public path)
-  src/
   -  css/
      -  common.css
   -  js/
      -  index.js
      -  test.js

Это мой webpack.config.js: 

const webpack = require('webpack');
const path = require('path');
const entryPath = path.resolve(__dirname, 'Source/Scripts/');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        index: entryPath + '/index.js',
        test: entryPath + '/test.js'
    },
    output: {
        path: path.resolve(__dirname, 'src/js'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
              }
        ]
    },
    plugins: [

        new MiniCssExtractPlugin({
            filename: "../css/[name].css"
          })
    ]
};

Мне нужен совет, как мне поступить следующим образом:

  1. Не используйте import '../styles/common.less в index.js. я бы хотел сделать common.less как entry point.
  2. Не используйте это странное имя: filename: "../css/[name].css"
...