javascript - Webpack: Multiple entry points of different types (JS, HTML, LESS,...) -

i use webpack package chrome extension. end, need put bunch of js files,

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

and few html , css files,

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

i figure i'll have use multiple entry files, i.e.,

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',   },   // ... } 

with loaders specified, e.g.,

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

however, i'm struggling output specifications. js files bundled alright, i'd html file end html, too. standard

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

this won't case since .js hardcoded.

is there way js, html, , css entry points output js, html, , css files, respectively?

you don't want include html files in webpack bundle, exist on own.

as bundling less/css, recommend using css , less loaders extract text webpack plugin. can used automatically bundle less/css modules import in javascript modules, , output css bundle location of choice.

so webpack.config this:

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')   ] } 

then in entry js, require less files:

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

all of styles bundled ./build/styles.css.