Webpackコマンド行パラメータ詳細

3153 ワード

多くの子供たちは、package.jsonのnpm scriptsを使うたびに、中の各種コマンドラインのパラメータによって、頭が大きくなります.本文はwebpackに対して、そのコマンドラインのパラメータを詳しく説明します.これを利用して各パラメータの役割を明確にし、その意味を知ることができるようにしてください.
"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-loader5.ウォッチパラメータ
--ウォッチ:ファイルの変化を監督する
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:各ステップのコンパイルの具体的な時間を提供します.
他のパラメータはここを参照してください.
この文章が皆さんに役立つことを望みます.