出力: 出力オプションを設定すると、Webpack がコンパイルされたファイルをハードディスクに書き込む方法を制御できます。複数のエントリ ポイントが存在できる場合でも、指定される出力構成は 1 つだけであることに注意してください。
まずnpm initプロジェクトを初期化し、 webpackとwebpack-cliローカルにインストールします。次に、ルート ディレクトリにindex.html 、 webpack.config.js 、およびsrcフォルダーを作成し、そのフォルダー内にエントリ ファイルとしてmain.jsを作成します。
準備作業が完了すると、図のようになります。
main.js
関数 Component(){
var div=document.createElement('div')
div.innerHTML="エクスポート設定を一緒に学びましょう~"
戻り値 div
}
document.body.appendChild(Component()) index.html
<body>
<script src="./dist/bundle.js"></script>
</body> package.json
"スクリプト": {
"テスト": "エコー "エラー: テストが指定されていません" && 終了 1",
"build":"webpack" // } を追加し、設定部分: webpack.config.js
outputオプションを設定すると、Webpack がコンパイルされたファイルをハードディスクに書き込む方法を制御できます。
複数の入口ポイントが存在する場合でも、指定される输出構成は 1 つだけであることに注意してください。
出力構成のいくつかの概念を次に示します。
1. パス
path はリソース出力の場所を指定し、必要な値は次のような絶対パスである必要があります。 :
const path=require(' パス')
module.exports={
エントリ:'./src/main.js',
出力：{
ファイル名:「バンドル.js」、
// リソースの出力場所をプロジェクトの dist ディレクトリ パスに設定します: path.resolve(__dirname, 'dist')
}、
Webpack 4 以降、
output.path はデフォルトで dist ディレクトリになりました。変更する必要がない限り、別途設定する必要はないので、webpack4 以降であれば、
module.exports={と記述できます。
エントリ:'./src/main.js',
出力：{
ファイル名:「バンドル.js」、
}、
} 2. filename
filename の機能は、文字列形式の出力リソースのファイル名を制御することです。ここでは、 bundle.jsという名前を付けます。これは、リソースを Bundle.js というファイルに出力することを意味します。
module.exports={
エントリ:'./src/main.js',
出力：{
ファイル名:「バンドル.js」、
}、
パッケージ化すると、
図に示すように、 bundle.jsファイルを含むdistフォルダーが自動的に生成されます。
filename はバンドルの名前だけでなく、相対パスでも構いません。
リソースを出力するときに Webpack がディレクトリを作成します。例:
module.exports = {
出力: {
ファイル名: './js/bundle.js',
}、
パッケージ化後の図に示すように
:
複数エントリのシナリオでは、 Webpack は、ファイル名を動的に生成するためのテンプレート言語に似たフォームの使用をサポートしています。
その前に、vender.js
で新しいエントリ ファイルを作成しsrc
関数コンポーネント(){
var div=document.createElement('div')
div.innerHTML="私は 2 番目のエントリ ファイルです"
戻り値 div
}
document.body.appendChild(Component()) webpack.config.js:
module.exports = {
エントリ：{
メイン: './src/main.js',
ベンダー:'./src/vender.js'
}、
出力: {
ファイル名: '[名前].js',
}、
パッケージ化後の図に示すように
:
ファイル名の[name]はチャンク名、つまりメインとベンダーに置き換えられます。したがって、最終的にvendor.jsとmain.jsが生成されます
<body>
index.htmlパスと一致させる必要があります。
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [質問] この時点で、生成されたバンドルを自動的に
index.htmlに追加させるにはどうすればよいでしょうか?ここでは、プラグイン HtmlWebpackPlugin を使用できます。詳細については、以下を参照してください。
3.
チャンク名を参照できる [name[name]加えて、ファイル名の設定に使用できるテンプレート変数がいくつかあります。
:クライアント キャッシュを制御する
[hash]および[chunkhash]は、ファイル名で使用される場合、チャンクの内容が変更されると、リソース ファイル名も変更される可能性があります。ユーザーは、次回リソース ファイルを要求したときに、ローカル キャッシュを使用せずに新しいバージョンをすぐにダウンロードします。
[query]も同様の効果を持つ可能性がありますが、チャンクの内容とは関係がないため、開発者が手動で指定する必要があります。
4. publicPath
publicPath は非常に重要な設定項目で、
例として
「./img.jpg」から画像を読み込みます。
関数コンポーネント() {
//...
var img = 新しい画像();
myyebo.src = Img //リクエストURL
//...
} {
//...
クエリ: {
名前: '[名前].[拡張子]',
出力パス: 'static/img/',
publicPath: './dist/static/img/'
}
上記の例に示すように、
元の画像リクエストのアドレスは./img.jpgですが、構成にpublicPathを追加すると、実際のパスは./dist/static/img/img.jpgになるため、画像は次から取得できます。パッケージ化されたリソース
には 3 つの形式があります
。 HTML 関連
これらのリソースをリクエストする場合、現在のページの HTML のパスが相対パスに追加されて、実際のリクエストが形成されます。
//現在の HTML アドレスが https://www.example.com/app/index.html であると仮定します。 //非同期でロードされるリソースの名前は 1.chunk.js publicPath:"" //-->https://www.example.com/app/1.chunk.js publicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
ホスト関連
publicPath の値が「/」で始まる場合、publicPath が「/」で始まることを意味します。今回は次で始まります。 現在のページのホスト名がベース パスです
。 // 現在の HTML アドレスが https://www.example.com/app/index.html であると仮定します。 //非同期でロードされるリソースの名前は 1.chunk.js publicPath:"/" //-->https://www.example.com/1.chunk.js publicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
CDN 関連
上記の 2 つは相対パスを使用して publicPath を設定することもできます
。この状況は通常、静的リソースが CDN に配置されている場合に発生します。そのドメイン名は現在のページのドメイン名と一致しないため、
publicPath がプロトコル ヘッダーまたは相対パスの形式で開始されるときに、
絶対パスの形式で指定する必要があります。//現在の HTML アドレスが https://www.example.com/app/index.html であると仮定します
。
//非同期でロードされるリソースの名前は 1.chunk.js publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js publicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. 単一の入口
Webpack でoutput属性を構成するための最小要件は、次の 2 点を含めて、その値をオブジェクトに設定することです。
filename出力ファイルのファイル名です。pathmodule.exports={
エントリ:'./src/main.js',
出力：{
ファイル名:「バンドル.js」、
}、
}
//webpack 4 以降は、デフォルトで dist が生成されるため、ここではパスは省略されます。 2. 複数のエントリ。
設定により複数の個別の「チャンク」が作成される場合は、各ファイルが確実に一意の名前を持つようにする必要があります
。ここでは、指定したファイル名の[name]が使用されます。
さらに、これらのリソースを指定したフォルダーに配置する場合は、 path構成
module.exports={を追加できます。
エントリ: {
メイン: './src/main.js',
ベンダー: './src/vender.js'
}、
出力: {
ファイル名: '[名前].js',
path: __dirname + '/dist/assets' //パッケージ化されたバンドルが /dist/assets ディレクトリに配置されることを指定します}
}
// パッケージ化後に生成: ./dist/assets/main.js, ./dist/assets/vender.js この章の上記の残りの問題は、プラグインHtmlWebpackPlugin使用することで解決できます。
プラグ
インをインストールします。 npm install --save-dev html-webpack-plugin
プラグインを設定します。
const HtmlWebpackPlugin=require('html-webpack-plugin') //モジュールをロード module.exports = {
エントリ：{
メイン: './src/main.js',
ベンダー:'./src/vender.js'
}、
// プラグインを追加します。
new HtmlWebpackPlugin({
タイトル:「アウトプット管理」
})
]、
出力: {
ファイル名: '[名前].js',
}、
パッケージ化
が完了すると、
新しいindex.html distに表示され、これを開くとブラウザにコンテンツが表示されることがわかります。
これは、将来プロジェクトを初期化するときに、 index.htmlを記述する必要がないことを意味します。
ソース コードは、https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/
から入手できます。
ファイル