/ 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']
  }
}

また、webpackの実行時に/ libの隣にあるディレクトリの/ distフォルダにmain.htmlを含めたいと思います。これどうやってするの？

更新1 2017_____________

これを行う私のお気に入りの方法はhtml-webpack-plugin、テンプレートファイルでを使用することです。受け入れられた答えにも感謝します！この方法の利点は、インデックスファイルに、キャッシュされたjsリンクが追加で追加されることです。

オプション1

あなたにはindex.js、ファイル（すなわちWebPACKのエントリは）あなたに必要追加index.htmlを介したファイル・ローダーのプラグイン、例えば：

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

webpackでプロジェクトをビルドしたら、 index.html、出力フォルダーに配置されます。

オプション2

html-webpack-pluginを使用して、index.htmlがまったく存在しないようにします。Webpackにファイルを生成させるだけです。

VitalyBの回答にオプションを追加します。

オプション3

npm経由。npmを介してコマンドを実行する場合は、この設定をpackage.jsonに追加できます（webpack.config.jsも確認してください）。runを開発するnpm start場合、この場合、index.htmlをコピーする必要はありません。これは、Webサーバーがソースファイルディレクトリから実行され、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、画像などをアプリに直接require含めると、webpackに含まれます（まあ、ローダーとプラグインで正しく設定した後）

CopyWebpackPluginを使用できます。それは次のように機能しています：

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

私は答えはそうだと思います：あなたはできません。（または、少なくとも：すべきではありません）。これは、Webpackが行うことになっていることではありません。Webpackはバンドラーであり、他のタスクには使用しないでください（この場合、静的ファイルのコピーは別のタスクです）。このようなタスクを実行するには、GruntやGulpなどのツールを使用する必要があります。統合することは非常に一般的である兵卒タスクとしてのWebPACKをかなどガルプタスク。どちらにも、説明したようなファイルのコピーに役立つ他のタスクがあります。たとえば、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.jsonIコピータスクを持っています："copy": "copyfiles -u 1 ./app/index.html ./deploy"

これにより、index.htmlがappフォルダーからdeployフォルダーに移動します。

index.htmlだけを取得したい場合に@hobbeshunterの回答を拡張するには、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のconfファイルで指定されていない場合、バンドルのデフォルトの出力名のようです。それは良い長期的な解決策ではないと思いますが、webpackの仕組みを理解するのに役立つことを願っています。