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

Question

I would like to use webpack to package a Chrome Extension. To this end, I need to put together a bunch of JS files,

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

and a few HTML and CSS files,

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

I figure I'll have to 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 the loaders specified, e.g.,

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

However, I'm struggling with the output specifications. The JS files get bundled alright, but I'd like the HTML file to end up as HTML, too. With the standard

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

this won't be the case since the .js is hardcoded.

Is there any way for JS, HTML, and CSS entry points to be output as JS, HTML, and CSS files, respectively?

Answer 1

You don't want to include your HTML files in the webpack bundle, those will exist on their own.

As for bundling LESS/CSS, I recommend using the CSS and LESS loaders with the extract text webpack plugin. This can be used to automatically bundle LESS/CSS modules that you import in your JavaScript modules, and then output that CSS bundle to the location of your choice.

So your webpack.config will look like 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 your entry JS, require your LESS files:

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

All of your styles will be bundled to ./build/styles.css.