如何创建多输出文件？答案

【问题标题】：How to create multi output files?如何创建多输出文件？
【发布时间】：2020-06-20 16:26:54
【问题描述】：

我想将我的 chrome 扩展程序与 Webpack 捆绑在一起。源包含多个条目，webpack.config.js 的内容如下所示：

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")
  }
};

及文件夹结构：

actions/index.js 和 options/index.js 文件是条目。我的目标是，当 src 被捆绑时，dist 文件夹应该如下所示：

如何配置 webpack config 以获得上述所需的文件夹结构？

谢谢

【问题讨论】：

标签： javascript webpack webpack-4

【解决方案1】：

这应该可以解决您的问题；）

文件结构

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

还有一个更正确的版本；）

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
};

我在github上创建了一个分支many-outputs

【讨论】：

【解决方案2】：

您可以为每个条目指定输出路径，这会将js 文件复制到您想要的结构中。

为了为每个条目生成html文件，您可以使用2次HTMLWebpackPlugin并指定chunk选项。

不要忘记将src/options.html & src/actions.html html 文件作为模板。

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

【讨论】：

src 文件夹的内容没有被复制，我收到了错误消息Conflict: Multiple chunks emit assets to the same filename index.js (chunks actions/index and options/index)。