web-dev-qa-db-ja.com

webpackを使用した複数のhtmlファイル

私はそれが可能かどうかわからないプロジェクトで何かをしようとしています。間違った方法で、または何かを誤解しています。私たちはwebpackを使用しており、アイデアは複数のhtmlファイルを提供することです。

localhost：8181-> index.htmlを提供
localhost：8181/example.html-> example.htmlを提供します

documentation に続いて、複数のエントリポイントを設定することでそれを実行しようとしています。

フォルダ構造は次のとおりです。

/
|- package.json
|- webpack.config.js
  /src
   |- index.html
   |- example.html
   | /js
      |- main.js
      |- example.js

Webpack.config.js：

...
entry: {
    main: './js/main.js',
    exampleEntry: './js/example.js'
},
output: {
    path: path.resolve(__dirname, 'build', 'target'),
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle_[chunkhash].js',
    sourceMapFilename: '[file].map'
},
...

index.html

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="/style/default.css">
</head>
<body>
    <div id="container"></div>
    <script src="/main.bundle.js"></script>
</body>
</html>

example.html：

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="/style/default.css">
</head>
<body>
    ...
    <script src="/example.bundle.js"></script>
</body>
</html>

誰かが私が間違っていることを知っていますか？

ありがとうございました。

webpackwebpack-dev-server
55
miguelitomp

Javascriptモジュール、画像、テンプレートなど、他の多くのアセットを参照するツリーのルートとしてエントリポイントを参照してください。複数のエントリポイントを定義する場合、基本的にアセットをいわゆるチャンクに分割して、すべてのコードとアセットを1つのバンドルに含めないようにします。

あなたが達成したいと思うのは、エントリーポイントで既に定義したアセットの異なるチャンクも参照する異なるアプリ用の複数の「index.html」を持つことです。

Index.htmlファイルをコピーしたり、これらのエントリポイントへの参照を持つファイルを生成したりすることは、エントリポイントメカニズムでは処理されません。逆の方法です。 htmlページを処理するための基本的なアプローチは、html-webpack-pluginを使用することです。これは、htmlファイルをコピーできるだけでなく、テンプレート化のための広範なメカニズムも備えています。これは、アプリの更新時にブラウザーのキャッシュの問題を避けるために、バンドルにバンドルハッシュを付加する場合に特に役立ちます。

名前パターンを[id].bundle_[chunkhash].jsとして定義したため、main.bundle.jsのようなものと呼ばれるため、javascriptバンドルをmain.bundle_73efb6da.jsとして参照できなくなりました。

html-webpack-plugin をご覧ください。ユースケースに特に関連します：

おそらく最終的にはそのようなものがあるはずです（警告：テストされていません）

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    chunks: ['main']
  }),
  new HtmlWebpackPlugin({
    filename: 'example.html',
    template: 'src/example.html',
    chunks: ['exampleEntry']
  })
]

チャンク配列のエントリポイントの名前を参照することに注意してください。したがって、この例ではexampleEntryになります。また、テンプレートをルートsrcフォルダー内に直接配置するのではなく、特定のフォルダーに移動することをお勧めします。

お役に立てれば。

78
Andreas Jägle

また、2つの異なるビルドが必要ない場合、つまり、同じmain.bundle.jsで異なるHTMLを提供したい場合に、 Webpackプラグインのコピー を使用することもできます。

プラグインは本当にシンプルです（webpack v4でのみテストされています）：

const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/example.html', to: './example.html' }
    ])
  ]
}

次に、example.htmlでindex.htmlからビルドをロードできます。例えば。：

<!DOCTYPE html>
<html
<head>
    ...
    <title>Example</title>
</head>
<body>
    <div id="container"> Show an example </div>
    <script src="main.bundle.js"></script>
</body>
</html>
2
F Lekschas