Моя структура каталогов должна быть похожа.
|-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?
Вы можете отделить свои потребности css в файлах и в точке входа к ним. например:
xx.less.js
require('./styles/xx.less');
и в записи webpack:
app: [path.join(__dirname, 'path/to/xx.less.js')]
и вызывать webpack несколько раз с помощью сценария узла или чего-то еще
Более подробный ответ:
каждая запись в конфигурации webpack представляет собой связанный файл, который будет создан, точка входа в js файл начальной точки, и каждый файл css будет создан в соответствии с ссылкой css в этом js файле.
Поэтому, если вам нужно несколько css файлов, вам нужно несколько записей в вашей конфигурации webpack, и для каждого 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');
И когда вы запустите webpack, он будет 3 css файла (и 3 js файлов...)