Я пытаюсь автоматизировать активы, входящие в / dist. У меня есть следующий config.js:

module.exports = {
  context: __dirname + "/lib",
  entry: {
    main: [
      "./baa.ts"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "foo.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

Я также хочу включить main.html из каталога, который находится рядом с / lib, в папку / dist при запуске webpack. Как я могу это сделать?

ОБНОВЛЕНИЕ 1 2017 _____________

Мой любимый способ сделать это сейчас - использовать html-webpack-pluginфайл шаблона. Спасибо за принятый ответ тоже! Преимущество этого способа заключается в том, что в индексном файле также будет добавлена ​​ссылка cachbusted js из коробки!

Опция 1

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

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

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

Вариант 2

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

Я добавлю опцию к ответу VitalyB:

Вариант 3

Через нпм. Если вы выполняете свои команды через 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 , как описано в этом ответе Stackoverflow

Но, как правило, за исключением самого «первого» файла (например, index.html) и более крупных ресурсов (таких как большие изображения или видео), включайте CSS, HTML, изображения и т. Д. Непосредственно в свое приложение через requireWebpack, и он будет включать его для вас. (ну, после того, как вы правильно настроили загрузчики и, возможно, плагины).

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

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

Я бы сказал, что ответ: ты не можешь. (или по крайней мере: вы не должны). Это не то, что должен делать 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потребности не должны быть частью пакета, и, следовательно, это не работа для упаковщика.

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

module.exports = {

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

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

}

Чтобы скопировать уже существующий 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 .

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

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

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

Чтобы расширить ответ @ 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 или файла или каких-либо других плагинов не требуется.

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

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