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

Question

I would like to use webpack to package the Chrome extension. To do this, I need to collect a bunch of JS files,

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

and some HTML and CSS files,

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

I believe that I will have to use multiple input 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 specified loaders, for example,

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

However, I struggle with the specifications output. JS files get bundled in order, but I would like the HTML file to appear in the HTML as well. With standard

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

this is not so, since it is .jshard-coded.

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

Answer 1

HTML webpack, .

LESS/CSS, CSS LESS webpack-. 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 LESS:

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

./build/styles.css.