Ответ 1

Опция 1

В вашем файле index.js (т.е. В записи в веб-пакете) добавьте требование к вашему index.html через плагин загрузчика файлов, например:

require('file-loader?name=[name].[ext]!../index.html');

Как только вы соберете свой проект с помощью веб-пакета, index.html будет в выходной папке.

Вариант 2

Используйте html-webpack-plugin, чтобы вообще не иметь index.html. Просто создайте файл для вас.

Ответ 2

Я добавлю вариант ответа VitalyB:

Вариант 3

Через npm. Если вы запустите свои команды через npm, вы можете добавить эту настройку в свой пакет package.json(также проверьте также webpack.config.js). Для разработки run npm start нет необходимости копировать index.html в этом случае, потому что веб-сервер будет запущен из каталога исходных файлов, а bundle.js будет доступен из того же места (bundle.js будет жить в памяти, но будет доступна, как если бы она была расположена вместе с index.html). Для производственного запуска npm run build и папка dist будет содержать ваши файлы bundle.js и index.html, которые будут скопированы с доброй старой командой cp, как вы можете видеть ниже:

"scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  }

Обновление: вариант 4

Существует copy-webpack-plugin, как описано в этом fooobar.com/questions/34858/...

Но в целом, за исключением самого "первого" файла (например, index.html) и более крупных активов (например, больших изображений или видео), включите css, html, изображения и т.д. прямо в ваше приложение через require и webpack будет включать его для вас (ну, после правильной настройки с загрузчиками и, возможно, с плагинами).

Ответ 3

Вы можете использовать CopyWebpackPlugin. Он работает так:

module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: './*.html'
    }])
  ]
}

Ответ 4

Я бы сказал, ответ: вы не можете. (или по крайней мере: вы не должны). Это не то, что должен делать Webpack. Webpack является поставщиком, и его нельзя использовать для других задач (в этом случае копирование статических файлов - это еще одна задача). Для выполнения таких задач вы должны использовать инструмент Grunt или Gulp. Очень часто интегрируется Webpack как задача Grunt или как Gulp задача. У них обоих есть другие задачи, полезные для копирования файлов, как вы описали, например, grunt-contrib-copy или gulp-copy.

Для других активов (а не index.html) вы можете просто связать их с помощью Webpack (для этого и предназначен Webpack). Например, var image = require('assets/my_image.png');. Но я полагаю, что ваш index.html не должен быть частью пакета, и поэтому это не является заданием для связки.

Ответ 5

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

module.exports = {

  entry: [
    __dirname + "/index.html",
    .. other js files here
  ],

  module: {
    rules: [
      {
        test: /\.html/, 
        loader: 'file-loader?name=[name].[ext]', 
      },
      .. other loaders
    ]
  }

}

Ответ 6

Эта работа хорошо работает в Windows:

• npm install --save-dev copyfiles
• В package.json У меня есть задача копирования: "copy": "copyfiles -u 1 ./app/index.html ./deploy"

Переместите мой index.html из папки приложения в папку развертывания.

Ответ 7

Чтобы скопировать уже существующий файл index.html в каталог dist вы можете просто использовать HtmlWebpackPlugin, указав в качестве шаблона исходный index.html.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [    
    new HtmlWebpackPlugin({
      template: './path/to/index.html',
    })
  ],
  // ...
};

Созданный файл dist/index.html будет в основном таким же, как ваш исходный файл, с той разницей, что связанные ресурсы, такие как файлы .js, добавляются тегами <script> через веб-пакет. Минификация и другие параметры могут быть настроены и задокументированы на github.

Ответ 8

Чтобы расширить ответ @hobbeshunter, если вы хотите использовать только index.html, вы также можете использовать CopyPlugin. Основная мотивация использования этого метода по сравнению с другими пакетами состоит в том, что это кошмар - добавлять много пакетов для каждого отдельного типа и настраивать его и т.д. Самый простой способ - использовать CopyPlugin для всего:

npm install copy-webpack-plugin --save-dev

затем

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'static', to: 'static' },
      { from: 'index.html', to: 'index.html', toType: 'file'},
    ]),
  ],
};

Как вы можете видеть, скопируйте всю статическую папку вместе со всем ее содержимым в папку dist. Нет CSS или файла или каких-либо других плагинов не требуется.

Хотя этот метод не подходит для всего, он сделает работу просто и быстро.

Ответ 9

Я также нашел это простой и достаточно универсальный, чтобы поместить мой index.html файл в dist/ директории и добавьте <script src='main.js'></script> в index.html включить мои файлы в комплекте WebPack. main.js видимому, является выходным именем по умолчанию для нашего пакета, если не указано иное в файле конфигурации webpack. Я думаю, что это не хорошее и долгосрочное решение, но я надеюсь, что оно поможет понять, как работает веб-пакет.