Я намагаюся автоматизувати активи, що надходять / перебувають у потоці. У мене є такі 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');

Після того як ви побудуєте свій проект з webpack, index.htmlвін буде у папці виводу.

Варіант 2

Використовуйте html-webpack-плагін, щоб взагалі не мати index.html. Просто попросіть веб-пакет створити файл для вас.

Я додам варіант відповіді Віталія:

Варіант 3

Через npm. Якщо ви запускаєте свої команди через npm, тоді ви можете додати цю установку до свого пакета.json (ознайомтесь і з webpack.config.js там). Для розробки запуску 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 , як описано у цій відповіді Stackoverflow

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

Ви можете використовувати плагін 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>тегами webpack. Мінімізація та інші параметри можуть бути налаштовані та задокументовані на 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включити мої файли в комплекті WebPack. main.jsЗдається, вихідне ім'я нашого пакету за замовчуванням, якщо в конф-файлі webpack не вказано інше . Я думаю, що це не гарне і довгострокове рішення, але я сподіваюся, що це допоможе зрозуміти, як працює веб- пакет .