如何创建多输出文件? [英] How to create multi output files?

问题描述

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

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:

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

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:

如何配置 webpack config 以获得上面想要的文件夹结构?

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

谢谢

推荐答案

这应该可以解决您的问题 ;)

This should solve your problems ;)

文件结构

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

I created a branch on github many-outputs

这篇关于如何创建多输出文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！