基本構成の出力を持つWebコアコンセプト_(第III章)_entry

出力エントリとベース構成
デフォルトの名前が出力に生成されたテキストの名前を指定することも、もちろん可能main.jsが生成されるエントリパッケージ化ファイルエントリは、エントリが文字列として構成することができる、オブジェクトを構成することができます。

  entry: {
    main: "./src/index.js"
  },

設定方法を複数のファイルをパッケージ化し
、あなたがindex.js srcディレクトリをしたい場合は、繰り返し二つのファイルが生成され、二回パッケージ、例えば、最初のファイルがmain.jsと呼ばれ、第二のファイルは、それらを支援するつもりsub.jsと呼ばれています

  entry: {
    main: "./src/index.js",
    sub: "./src/index.js"
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },

このような直接の包装は、2つのファイルはindex.jsアウトと呼ばれる名前をパッケージ化しているので、我々は完全なパッケージ名を定義するには、プレースホルダを使用することができ、間違っていることがあります

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

パッケージが正常に生成することができますので、ここでの名前は、ファイルはフォルダdistの中にある、対応するキー値のエントリを参照し
ここに画像を挿入説明
、生成index.htmlを開き、我々はこれらの2つのJSファイルの導入が一方であることを見つける
ここに画像を挿入説明
のパッケージに注入ドメイン
パッケージ完全にindex.htmlをした後、この文書では、入り口として、ファイルのバックエンド、バックエンドを提供しますが、JSファイルは、我々が発生したのindex.htmlを詰め、私たちはmain.jsを引用しないと思い、次のようなCDNドメイン名にアップロードされますあるいはsub.js、このように、アドレスの前にCDN所望のマルチドメイン:
ここに画像を挿入説明
パッキングが完了した後は、必ず手動で出力に配置されてもよいハエを、変更しないで、HTML CDNマルチバンドのフロントJSのドメイン名に注入されます。

  output: {
    publicPath: 'http://cdn.com/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

実行パッケージは、それがかかるだろう
ここに画像を挿入説明
、プロジェクトのニーズが背景のindex.htmlを参照する場合、およびCDN上の静的リソースの場合には、この時間は、あなたは、設定項目が出力publicPath使用することができ
、これらは一般的に使用される構成のエントリおよび出力を設定することですアイテムの
公式文書:DOCUMENTATION-> [設定---->出力
DOCUMENTATION->ガイド- >出力管理(HTML-のWebPACK -プラグインのWebPACK -プラグインとクリーン)
DOCUMENTATION-> Plugins-> HtmlWebpackPlugin(プラグインのドキュメント)

公開された137元の記事 ウォン称賛30 ビュー260 000 +

おすすめ

転載: blog.csdn.net/hani_wen/article/details/95075517