webpack入门(五)webpack CLI
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.
webpack入门(五)webpack CLI的更多相关文章
- Webpack入门——使用Webpack打包Angular项目的一个例子
2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- webpack入门(2)
webpack入门(2) ps:每个案例都是基于前一个案例改造的 webpack入门(1) 戳这里 案例源码戳这里 十二.ProvidePlugin 自动加载模块 new webpack.Provid ...
- 【一小时入门】webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- webpack入门(1)
webpack入门(1) 源码戳这里 ps:每个案例对应相应的demo,例如"案例1"对应"demo1" 一.webpack基本功能及简单案例 安装webpac ...
- webpack入门概念
一 概念 1 入口(entry) 入口起点(entry point)提示webpack 应该使用那个模块,来作为构建其内部依赖图得开始.进入入口七点后,webpack 会找出那些模块和库是入口起点(直 ...
- webpack入门(四)——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffee ...
随机推荐
- C# Note1:深入浅出WPF-MVVM篇
一.资源说明 (1)配套视频:深入浅出WPF 讲的不错! 待更!
- Kettle 变量(arg位置参数)
1.表输入中使用?占位作为kettle转换变量 数据预览: 获取变量数据: 使用?传入变量 需要勾选替换sql语句中的变量,并选则从步骤插入数据中所在步骤 数据预览
- linux之nload和iftop查看网络使用情况
操作系统: centos7 nload: yum install -y gcc yum install -y gcc-c++ yum install -y ncurses-devel yum inst ...
- python爬虫之git的团队协作
一.Git实践: commit,push,pull,status,add基本是最常用的几个命令. 1.首先我在github上创建了一个项目,然后我在本地的文件建立了一个普通的目录(git_data). ...
- 《笔记》Apache2 mod_wsgi的配置
接手了一台古老的服务器的还使用的是mod_wsgi,所以需要配置一下.其实这里有点怀念,记得当年自己折腾第一个app的时候,还是个什么都不懂的菜鸡.当时用django搜方案的时候,还不知道有uwsgi ...
- 有时候做JQ动画,鼠标经过,它会不停自己抖动不停,解决方法(此处,是兼容IE ,当鼠标经过,遮罩层从下移到上边的JQ动画效果)
<style> .x_sdbb { margin: 60px 0 40px 0; } .x_title2{ background: url(../images/hdb_img17.png) ...
- 老男孩python学习自修第五天【集合】
特点: (1)无序 (2)不重复 使用场景: (1)关系测试 (2)去重 x & y 求交集 x | y 求并集 x - y 求差集 x ^ y 求对称差集 x.intersection(y) ...
- PHP的爬虫框架
Beanbun PHPSpider PHPQuery QueryList PHPCrawer Snoopy
- Arrays类
package cn.zhou.com; import java.util.Arrays; /* * Arrays 类 ? * * 数组工具类 操作数组! * * Arrays的方法? * * */ ...
- 洛谷 p1019 单词接龙
题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...