Webpack: несколько точек входа разных типов (JS, HTML, LESS, ...)

Question

Я хотел бы использовать webpack для упаковки расширения Chrome. Для этого мне нужно собрать кучу JS файлов,

• background.js,
• popup.js,
• content.js,

и несколько HTML и CSS файлы,

• popup.html,
• popup.css,
• content.css.

Я полагаю, что я должен буду использовать несколько файлов ввода, т.е.

module.exports = { 
    entry: { 
    background: './src/scripts/background.js', 
    content: './src/scripts/content.js', 
    popup: './src/scripts/popup.js', 
    html: './src/popup.html', 
    ccss: './src/styles/content.less', 
    pcss: './src/styles/popup.less', 
    }, 
    // ... 
} 

С грузчиками, указанных, например,

module: { 
    loaders: [ 
    { test: /\.html$/, loader: 'file-loader' }, 
    { test: /\.less$/, loader: 'style!css!less' }, 
    // ... 
    ], 
} 

Однако, я борюсь с output технические характеристики. Файлы JS попадают в комплекте в порядке, но я хотел бы, чтобы HTML-файл оказался в виде HTML. Со стандартной

output: { 
    path: './build/', 
    filename: '[name].js', 
}, 

это не будет иметь место, так как .js является жёстко.

Есть ли способ для ввода точек ввода JS, HTML и CSS в виде файлов JS, HTML и CSS, соответственно?

Answer 1

Вы не хотите включать ваши HTML-файлы в пакет webpack, они будут существовать самостоятельно.

Что касается связывания LESS/CSS, я рекомендую использовать загрузчики CSS и LESS с помощью extract text webpack plugin. Это можно использовать для автоматического связывания модулей LESS/CSS, которые вы импортируете в своих модулях JavaScript, а затем выводите этот набор CSS в выбранное вами местоположение.

Так что ваш webpack.config будет выглядеть следующим образом:

var ExtractTextPlugin = require('extract-text-webpack-plugin');  

module.exports = { 
    entry: { 
    background: './src/scripts/background.js', 
    content: './src/scripts/content.js', 
    popup: './src/scripts/popup.js' 
    }, 
    output: { 
    path: './build/', 
    filename: '[name].js', 
    }, 
    loaders: [ 
    { test: /\.less$/, loader: 'style!css!less' }, 
    // ... 
    ], 
    plugins: [ 
    new ExtractTextPlugin('[name].css') 
    ] 
} 

Затем в записи JS, требуют ваши МЕНЬШЕ файлы:

require('./path/to/style.less'); 

Все ваши стили будут поставляться в комплекте с ./build/styles.css.