1. ホーム
  2. ウェブパック

[解決済み】Webpack.configでindex.htmlをdistフォルダにコピーするだけの方法

2022-04-12 21:09:22

質問

私は、/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の隣にあるディレクトリのmain.htmlを/distフォルダにインクルードしたいです。どうすればいいでしょうか?

アップデート1 2017_____________

今、私が一番気に入っているのは html-webpack-plugin をテンプレートファイルにて作成しました。こちらこそ、受け入れていただいた回答ありがとうございました この方法の利点は、indexファイルにもcachbusted jsのリンクがいきなり追加されることです!

どのように解決するのですか?

オプション1

あなたの index.js ファイル (つまり webpack のエントリ) に require を追加してください。 index.html を経由して ファイルローダー プラグインを使用する場合などです。

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

webpackでプロジェクトをビルドしたら。 index.html が出力フォルダに入ります。

オプション2

使用方法 html-webpack-plugin を使えば、index.htmlを全く持たないで済みます。webpackにファイルを生成してもらうだけです。

この場合、もしあなたが自分の index.html ファイルをテンプレートとして使用することができます。

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

をご覧ください。 ドキュメント をご覧ください。