CODEWITHSUNDEEP
javascriptwebpackwebpack-4
softshipper
softshipper

Reputation: 34099

How to create multi output files?

I would like to bundle my chrome extension with Webpack. The source consists multiple entries and the content of the webpack.config.js looks as follows:

const path = require("path");

module.exports = {
  entry: {
    actions: './src/actions/index.js',
    options: './src/options/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "dist")
  }
};

And folder structure:
enter image description here

The actions/index.js and options/index.js files are entries. My goal is, when the src get bundled then dist folder should looks as follows:

enter image description here

How to configure the webpack config to get the desired folder structure above?

Thanks

Upvotes: 2

Views: 6799

Answers (3)

Koushik Das
Koushik Das

Reputation: 10813

As per the official documentation of Webpack, you could do something like this (I've done this and it works)

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

Reference: Multiple entry points webpack

Upvotes: 0

Grzegorz T.
Grzegorz T.

Reputation: 4153

This should solve your problems ;)

file structure

src
├── actions
│   ├── index.html
│   └── index.js
└── options
    ├── index.html
    └── index.js

webpack.config.js

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    actions: './src/actions/index.js',
    options: './src/options/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]/index.js'
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/actions/index.html',
      filename: 'actions/index.html',
      chunks: ['actions']
    }),
    new HtmlWebPackPlugin({
      template: './src/options/index.html',
      filename: 'options/index.html',
      chunks: ['options']
    })
  ]
};

And a more correct version ;)

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const ENTRY = {
  actions: './src/actions/index.js',
  options: './src/options/index.js'
}

const entryHtmlPlugins = Object.keys(ENTRY).map(entryName => {
  return new HtmlWebPackPlugin({
    template: `./src/${entryName}/index.html`,
    filename: `${entryName}/index.html`,
    chunks: [entryName]
  });
});

module.exports = {
  entry: ENTRY,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]/index.js'
  },
  plugins: entryHtmlPlugins
};

I created a branch on github many-outputs

Upvotes: 8

felixmosh
felixmosh

Reputation: 35573

You can specify the output path for each entry, this will copy the js files into the structure you want.

In order to generate html file for each entry, you can use 2 times HTMLWebpackPlugin with specifying chunk option.

Don't forget to put a src/options.html & src/actions.html html files as a templates.

const path = require('path');

module.exports = {
  entry: {
    'actions/index': './src/actions/index.js',
    'options/index': './src/options/index.js',
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'options.html'),
      filename: 'options.html',
      chunks: ['options'],
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'actions.html'),
      filename: 'actions.html',
      chunks: ['actions'],
    }),
  ],
};

Upvotes: 0

Related Questions