webpack的CLI安裝和命令
Installation
$ npm install webpack -g
The webpack
command is now available globally. 執行完上面命令,webpack命令在全局可用
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都會在初始的時候加載)
If you pass a pair in the form <name>=<request>
you can create an additional entry point. 如果傳一個一對值,你就可以創建額外的entry
It will be mapped to the configuration option entry
. 會被映射到配置的entry選項
output
Pass a path to a file. 傳入一個文件路徑
It will be mapped to the configuration options output.path
andoutput.filename
. 會被映射到配置選項的output.path
和output.filename
.
Configuration options
Many configuration options are mapped from CLI options. I. e. --debug
maps to debug: true
, or --output-library-target
to output.libraryTarget
.
You see a list of all options, if you don’t pass any option. 許多配置選項是從cli選項映射來的。 --debug對象debug:true,--output和 --output-library-target對應
output.libraryTarget
.如果你不傳參數,你就會看到所有選項的列表
Plugins
Some plugins are mapped to CLI options. I. e. --define <string>=<string>
maps to the DefinePlugin
.
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.