[解決済み】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'
})
]
}
をご覧ください。 ドキュメント をご覧ください。
関連
-
[解決済み】無効な設定オブジェクトです。APIスキーマと一致しない設定オブジェクトを使用してWebpackが初期化されました。
-
webpack getaddrinfo ENOTFOUND localhost エラー
-
[解決済み】「import」「export」がトップレベルにしか表示されない場合がある。
-
[解決済み] モジュール 'webpack/bin/config-yargs' が見当たりません。
-
未定義のプロパティ 'properties' を読み取ることができません。
-
localhostと0.0.0.0の違いについて
-
[解決済み] Webpack - CopyWebpackPluginを使用してソースから公開ファイルへファイルをコピーする
-
[解決済み] Webpack - CopyWebpackPluginを使用してソースから公開ファイルへファイルをコピーする
-
ESlintの構文検出設定方法をオフにする
-
[解決済み】Webpack.configでindex.htmlをdistフォルダにコピーするだけの方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】モジュール 'webpack/bin/config-yargs' が見つかりません。
-
webpack getaddrinfo ENOTFOUND localhost エラー
-
[解決済み】「import」「export」がトップレベルにしか表示されない場合がある。
-
[解決済み] モジュール 'webpack/bin/config-yargs' が見当たりません。
-
[解決済み] モジュールのビルドに失敗しました(./node_modules/babel-loader/lib/index.js から)。TypeError: nullのプロパティ 'bindings' を読み取ることができません。
-
[解決済み] Vue.jsのready()メソッドがvueコンポーネントで呼び出されない
-
[解決済み] Webpackで静的ファイルをビルドディレクトリにコピーする方法は?
-
[解決済み】Webpackのスタイルローダーとcssローダーの比較
-
[解決済み】Webpack.configでindex.htmlをdistフォルダにコピーするだけの方法
-
[解決済み] The code generator has deoptimised styling of [some file] as it exceed of max of "100KB"" とはどういう意味ですか?