В Webpack, как получить несколько выходов с одной записи main.js(с несколькими файлами CSS внутри файлов)?

Question

Моя структура каталогов должна быть такой.

|-src/
|   |-styles/ (less)
|   |   |-xx.less(input inside main.js)
|   |   |-yy.less(input inside main.js)
|   |   |-zz.less(input inside main.js)
|
|-dist/  
    |-assets/
    |   |-xx.css(output should be like this)
    |   |-yy.css(output should be like this)
    |   |-zz.css(output should be like this)

и мой файл main.js содержит,

require('./styles/xx.less');
require('./styles/yy.less');
require('./styles/zz.less');

и моя точка входа

entry: {
    app: './main.js'
  },

1. Как я могу получить выходные данные в виде кусков (xx.css,yy.css,zz.css)? 2. Попробовал там extractTextPlugin Я смог получить вывод под именем app.css, но не так, как хотел. Какой плагин я могу попытаться извлечь вывод, как с тем же именем и номером ввода у меня в файле main.js?

Answer 1

Вы можете разделить ваши требования CSS на файлы и в точке входа к ним. например:

xx.less.js

require('./styles/xx.less');

и в записи веб-пакета:

app: [path.join(__dirname, 'path/to/xx.less.js')]

и вызвать webpack несколько раз, используя скрипт узла или что-то

Более сложный ответ:

каждая запись в конфигурации веб-пакета представляет связанный файл, который будет создан, точка входа в файл js начальной точки и каждый файл css будут созданы в соответствии со ссылкой css в этом файле js.

Поэтому, если вам нужно несколько CSS-файлов, вам нужно несколько записей в конфигурации вашего веб-пакета, и для каждого js в записи потребуется свой меньший файл, и таким образом вы получите 3 js-файла и 3 css-файла, поэтому ваша конфигурация должна выглядеть примерно так:

{
        entry: {
            xx: [ path.resolve(__dirname, 'path/to/js/xx.js')],
            yy: [ path.resolve(__dirname, 'path/to/js/yy.js')],
            zz: [ path.resolve(__dirname, 'path/to/js/zz.js')]
        },

        output: {
            path: path.resolve(__dirname, 'dist/assets'),
            filename: '[name].js' //the placeholder name will be replace by the entry name (xx,yy,zz)
        }

        ...

        plugins: [
            new ExtractTextPlugin({
                filename: '[name].css' //this is the name of the css according to the entry in the js file
            })
}

Ваш меньший загрузчик должен оставаться прежним и просто указывать на src/styles, где все меньше файлов, и в ваших файлах javascript (xx.js,yy.js,zz.js) вам потребуется соответствующий файл поменьше

в xx.js вы вызываете xx.less: require('./styles/xx.less');

в yy.js вы называете yy.less: require('./styles/yy.less');

в zz.js вы называете zz.less: require('./styles/zz.less');

И когда вы запустите веб-пакет, он получит 3 файла CSS (и 3 файла JS...)