webpack入門(五)webpack CLI

webpack的CLI安裝和命令html

Installation

$ npm install webpack -g

The webpack command is now available globally.    執行完上面命令,webpack命令在全局可用node

Pure CLI

webpack <entry> <output>

entry

Pass a file or a request string. You can pass multiple entries (every entry is loaded on startup).   傳入一個文件或者請求字符串,你能夠傳遞多個entries(每一個entry都會在初始的時候加載)webpack

If you pass a pair in the form <name>=<request> you can create an additional entry point.   若是傳一個一對值,你就能夠建立額外的entrygit

It will be mapped to the configuration option entry.   會被映射到配置的entry選項github

output

Pass a path to a file.    傳入一個文件路徑web

It will be mapped to the configuration options output.path andoutput.filename. 會被映射到配置選項的output.path 和output.filename.npm

Configuration options

Many configuration options are mapped from CLI options. I. e. --debugmaps to debug: true, or --output-library-target to output.libraryTarget.json

You see a list of all options, if you don’t pass any option.  許多配置選項是從cli選項映射來的。 --debug對象debug:true,--output和 --output-library-target對應output.libraryTarget.若是你不傳參數,你就會看到全部選項的列表api

Plugins

Some plugins are mapped to CLI options. I. e. --define <string>=<string> maps to the DefinePlugin.app

You see a list of all options, if you don’t pass any option.  一些插件也對應CLI的選項,--define <string>=<string> 對應 DefinePlugin.若是你不傳參數,你就會看到全部選項的列表

Development shortcut -d

Equals to --debug --devtool source-map --output-pathinfo  等同於--debug --devtool source-map --output-pathinfo

Production shortcut -p

Equals to --optimize-minimize --optimize-occurence-order

Watch mode --watch

Watches all dependencies and recompile on change.   觀測全部依賴,若有變更,從新編譯。(經常使用的選項)

Configuration file --config example.config.js

Specifies a different configuration file to pick up. Use this if you want to specify something different than webpack.config.js, which is the default.

選擇不一樣配置的文件,當你想指向別的配置文件而不是默認的webpack.config.js的時候用。(經常使用的選項)

Display options

--progress

Display a compilation progress to stderr.   在stderr中顯示編譯進度。

--json

Write JSON to stdout instead of a human readable format.    輸出JSON格式而不是人類可讀的格式

Hint: Try to put the result into the analyse tool.  

--no-color

Disable colors to display the statistics.   展現統計信息的時候禁用顏色。

--sort-modules-by--sort-chunks-by--sort-assets-by

Sort the modules/chunks/assets list by a column. 按列排序模塊/塊/assets列表。

--display-chunks

Display the separation of the modules into chunks. 展現分離爲chunks的模塊

--display-reasons

Show more information about the reasons why a module is included.  展現一些爲啥這個模塊被包含的信息。

--display-error-details

Show more information about the errors. I. e. this shows which paths are tried while resolving a module. 展現更多的錯誤信息。好比展現解析模塊時嘗試的路徑

--display-modules

Show hidden modules. Modules are hidden from output by default when they live inside directories called["node_modules", "bower_components", "jam", "components"]  顯示隱藏模塊,當他們在["node_modules", "bower_components", "jam", "components"]中被調用時,模塊默認被隱藏。

Profiling

If you wish to have a more in-depth idea of what is taking how long, you can use the --profile switch. This will cause WebPack to display more detailed timing informations. Combine this with the switches above to get a very detailed message and information set, which will contain the timings of your modules. 若是你但願有一個什麼是多久的想法,你能夠用--profile來選擇,他會讓webpack展現更多的時間信息。結合以上的選擇,會獲得一個詳盡的信息,包含你模塊的耗時。

The timing 「keys」

  • factory: The time it took to build the module information.構建模塊信息的時間。
  • building: The time that was spent building the module (loaders, for example).構建模塊的時間(好比loaders)
  • dependencies: The time that was spent gathering and connecting the dependencies. 整合和鏈接模塊依賴的時間。

Additional configuration options

When using the CLI it’s possible to have the following options in the configuration file. They passed in other ways when using the node.js API.

當使用CLI,可能會用到下面配置文件中的選項,當用nodejs API的時候會以其餘方式被傳入。

watch

Enter watch mode, which rebuilds on file change.  進入觀察模式,文件改變觸發從新構建

watchOptions.aggregateTimeout

Delay the rebuilt after the first change. Value is a time in ms.  第一次改變後延遲重建的時間,值是時間毫秒數。

Default: 300

watchOptions.poll

true: use polling 

number: use polling with specified  interval   在指定區間使用輪詢

Default: undefined

stats

Display options. See node.js API Stats.toString() for more details. 

相關文章
相關標籤/搜索