Webpackコマンド行パラメータ詳細
3153 ワード
多くの子供たちは、package.jsonのnpm scriptsを使うたびに、中の各種コマンドラインのパラメータによって、頭が大きくなります.本文はwebpackに対して、そのコマンドラインのパラメータを詳しく説明します.これを利用して各パラメータの役割を明確にし、その意味を知ることができるようにしてください.
1.構成に関するパラメータ
--env:環境変数の設定
→config:プロファイルパスの設定 config webpack.dist.co.fig.js
--mode:開発モード mode productior--mode developement
2.出力に関するパラメータ
--output-path:出力ファイルパス
--output-filename:出力ファイル名は自分のフォーマットで出力します.
--debug: debugモードを開く
--progress:プリントコンパイルの進捗
--devtool:source mapタイプを定義する
--display-error-detail:エラーの詳細を表示します.
4. Moduleパラメータ
--module-bind:1つの拡張プログラムを結びつけて例えば:
--ウォッチ:ファイルの変化を監督する
6. Optimizeパラメータ
--optimize-max-chunks:コードブロックの最大数を設定します.
7. Sttsパラメータ
--display:包装情報が表示されますので、具体的な情報はここを参考にしてください.
--カラー、--colors:consoneに色が表示されます.
8.上位パラメータ
--bail: コンパイルプロセスがerrorがあると、すぐにコンパイルを中止します.
--hot:熱交換、configファイルにも配置可能です.
--provide:モジュールを提供して、全体的に使用します.例えば、--provide jQuery=jquery
--profile:各ステップのコンパイルの具体的な時間を提供します.
他のパラメータはここを参照してください.
この文章が皆さんに役立つことを望みます.
"scripts": {
"build": "./node_modules/.bin/webpack --bail --progress --profile --mode production --display-chunks --display-modules --config webpack.dist.config.js"
}
上記の例では、最初はwebpackコマンドです.本例では、グローバルではなくプロジェクト中のwebpackを使用しているので、webpackの相対パスを直接入力しました.1.構成に関するパラメータ
--env:環境変数の設定
→config:プロファイルパスの設定 config webpack.dist.co.fig.js
--mode:開発モード mode productior--mode developement
2.出力に関するパラメータ
--output-path:出力ファイルパス
--output-filename:出力ファイル名は自分のフォーマットで出力します.
webpack index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js'
| Asset | Size | Chunks | Chunk Names |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js | 2.6 kB | 0 [emitted] | index2 |
| index740fdca26e9348bedbec.bundle.js | 2.59 kB | 1 [emitted] | index |
[0] ./src/others.js 29 bytes {0} {1} [built]
[1] ./src/index.js 51 bytes {1} [built]
[2] ./src/index2.js 54 bytes {0} [built]
--output-source-map-filename:ファイル名をマッピングし、ファイルを包装した後、ソースファイルとマッピング関係があります.mapを通じてソースファイルを見つけることができます.webpack.js index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js' --devtool source-map --output-source-map-filename='[name]123.map'
| Asset | Size | Chunks | Chunk Names |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js | 2.76 kB | 0 [emitted] | index2 |
| index740fdca26e9348bedbec.bundle.js | 2.74 kB | 1 [emitted] | index |
| index2123.map | 2.95 kB | 0 [emitted] | index2 |
| index123.map | 2.95 kB | 1 [emitted] | index |
[0] ./src/others.js 29 bytes {0} {1} [built]
[1] ./src/index.js 51 bytes {1} [built]
[2] ./src/index2.js 54 bytes {0} [built]
3.Debugパラメータ:--debug: debugモードを開く
--progress:プリントコンパイルの進捗
--devtool:source mapタイプを定義する
--display-error-detail:エラーの詳細を表示します.
4. Moduleパラメータ
--module-bind:1つの拡張プログラムを結びつけて例えば:
--module-bind js=babel-loader
5.ウォッチパラメータ--ウォッチ:ファイルの変化を監督する
6. Optimizeパラメータ
--optimize-max-chunks:コードブロックの最大数を設定します.
--optimize-max-chunks 10
--optimize-min-chunk-size:コードブロックの最小値を設定します.--optimize-min-chunk-size 10000
--optimize-minimize:jsファイルを圧縮する7. Sttsパラメータ
--display:包装情報が表示されますので、具体的な情報はここを参考にしてください.
--カラー、--colors:consoneに色が表示されます.
8.上位パラメータ
--bail: コンパイルプロセスがerrorがあると、すぐにコンパイルを中止します.
--hot:熱交換、configファイルにも配置可能です.
--provide:モジュールを提供して、全体的に使用します.例えば、--provide jQuery=jquery
--profile:各ステップのコンパイルの具体的な時間を提供します.
他のパラメータはここを参照してください.
この文章が皆さんに役立つことを望みます.