Как создать несколько выходных файлов? - PullRequest
Новая
       4

Как создать несколько выходных файлов?

0 голосов
/ 08 марта 2020

Я хотел бы связать свое расширение 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")
  }
};

И структура папок:
enter image description here

The actions/index.js и options/index.js файлы являются записями. Моя цель состоит в том, чтобы при объединении src папка dist должна выглядеть следующим образом:

enter image description here

Как настроить конфигурацию веб-пакета для получения желаемая структура папок выше?

Спасибо

Ответы [ 2 ]

3 голосов
/ 08 марта 2020

Это должно решить ваши проблемы;)

структура файла 

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 много выходов

0 голосов
/ 08 марта 2020

Вы можете указать путь вывода для каждой записи, при этом файлы 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'],
    }),
  ],
};
...