Как установить множественный ввод и вывод файла в проекте с помощью webpack?

Ответ 1

Для многих точек входа используются массивы как значение свойства entry:

entry: {
  app: ['./app/main.js', '.lib/index.js'],
  vendors: ['react']
}

app и vendors являются массивами, поэтому вы можете разместить туда столько файлов, сколько вам нужно.

В случае вывода:

output: {
  path: staticPath,
  filename: '[name].js'
}

[name] берется из свойств entry, поэтому, если у нас есть свойства app и vendors, мы получили 2 выходных файла - app.js и vendors.js.

Ссылка документации

Ответ 2

Если вы хотите выводить на несколько каталогов, вы можете использовать путь как имя записи. Например, если вы хотите эту структуру каталогов:

apps
├── dir1
│   └── js
│       ├── main.js [entry 1]
│       └── bundle.js [output 1]
└── dir2
    ├── index.js [entry 2]
    └── foo.js [output 2]

Затем попробуйте это в своем модуле. Экспорт:

{
  entry: {
    'dir1/js/bundle': path.resolve(__dirname, '/apps/dir1/js/main.js'),
    'dir2/foo' : path.resolve(__dirname, '/apps/dir2/index.js')
  },
  output: {
    path: path.resolve(__dirname, '/apps'),
    filename: '[name].js'
  },
  ...
}

Ответ 3

то, что действительно решило это для меня, было этим:

entry:  {
    app : __dirname + "/app/views/app/app.js",
    admin : __dirname + "/app/views/admin/admin.js"
}

output: {
    path: __dirname + "/public",
    filename: "[name].js"
},

Ответ 4

Что делать, если вы хотите получать выходные файлы как foo.css и bar.js одновременно? ответы выше кажутся неспособными справиться с этим.

Разумным способом является использование multi-compiler. Один входной файл имеет один конфигурационный объект для одного выходного файла. Из этого answer.

Ответ 5

этот плагин webpack web-webpack-plugin может разрешить его образцом.

AutoWebPlugin может найти всю запись страницы в каталоге, затем автоматически настроить a WebPlugin для каждой страницы для вывода html файла, вы можете использовать ее, как показано ниже:

Конфигурация webpack

module.exports = {
    plugins: [
        new AutoWebPlugin(
            // the directory hold all pages
            './src/', 
            {
            // the template file path used by all pages
            template: './src/template.html',
            // javascript main file for current page,if it is null will use index.js in current page directory as main file
            entity: null,
            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
            // achieve by CommonsChunkPlugin
            commonsChunk: 'common',
            // pre append to all page entry
            preEntrys:['./path/to/file1.js'],
            // post append to all page entry
            postEntrys:['./path/to/file2.js'],
        }),
    ]
};

каталог src

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

каталог вывода

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPlugin найти всю страницу home login signup в каталоге ./src/, поскольку эта третья страница home login signup будет использовать index.js в качестве основного файла и выводит три файла html home.html login.html signup.html`

см. doc: автоматически обнаружить запись html

Ответ 6

Этот вопрос составляет 2 года, поэтому я думаю, что автор почти наверняка перешел от этой проблемы, но для тех, кто приземлился здесь совсем недавно, у меня была действительно такая же потребность, и я смог написать свой собственный плагин, чтобы позволить динамические пути вывода/имена из известных и/или неизвестных точек входа.

Моя проблема и мыслительный процесс для решения можно найти здесь.

И сам пакет Node.

Ответ 7

Для моего случая использования мне действительно нужно было использовать различные шаблоны в зависимости от среды. Для этого я передал переменную NODE_ENV

module.exports = (env, argv) => {
  const ENVIRONMENT = env.NODE_ENV;
  let INDEX_HTML = 'index.html';
  if (ENVIRONMENT === 'staging') {
    INDEX_HTML = 'index-stg.html';
  }

Затем:

if (NODE_ENV === 'staging') {
   INDEX_HTML = 'index-stg.html';
}

На выходе:

output: {
      path: process.cwd() + '/build',
      filename: '[name].js',
      chunkFilename: '[${HASH_MODE}].[name].js'
    },

плагины:

new HtmlWebpackPlugin({
        inject: true,
        template: 'app/${INDEX_HTML}',
      }),

Ответ 8

Вы можете обнаружить несколько записей и сгенерировать отдельные выходные файлы, используя шаблоны синхронизации глобуса.

Поместите это в ваш webpack.config.js (без ...)

const glob = require("glob");
...
module.exports = (env, options) => ({
  ...
  entry: glob.sync("./javascripts/**/*.js").reduce((acc, item) => {
    const path = item.split("/");
    path.pop();
    const name = path.join('/');
    acc[name] = item;
    return acc;
  }, {}),
  output: {
    filename: "[name]/bundle.js",
    path: path.resolve(__dirname, "")
  },
  ...
});

Это "должно" дать вам желаемый результат.