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:

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:

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

Thanks

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/60589413/how-to-create-multi-output-files

标签

javascript

Webpack

webpack-4