input选项
自我总结: 如其名，一些入口处的引导文件
Output选项
定义：output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
自我总结：这个也没什么说的，如其名，定义了最终生成文件的地址以及其他选项
path
- 此选项影响 compilation 对象的输出。output 选项控制 webpack 如何向硬盘写入编译文件。
- 注意，即使可以存在多个入口起点，但只指定一个输出配置。
- 如果你用了哈希（[hash] 或 [chunkhash]），请确保模块具有一致的顺序。可以使用 OccurrenceOrderPlugin 或 recordsPath。
filename
- 指定硬盘每个输出文件的名称。
sourceMapFilename
- JavaScript 文件的 SourceMap 的文件名。
- 它们在 output.path 目录中。
chunkFilename
- 非入口的 chunk(non-entry chunk) 的文件名，路径相对于 output.path 目录。
library:
- 如果设置此选项，会将 bundle 导出为 library。
- output.library 是 library 的名称。
libraryTarget
- library 的导出格式
publicPath
- 这个选项困扰了我好久，直到我看了这个视频跟着走才明白其意思，他的意思就是如果你把比如img和其他的东西都生成在build文件夹中，如果你不指明这个选项，那么html中引用的地址也不会加上build，而是把当前的html的目录作为了根目录去找。声明了这个选项后，也就是指明了资源文件的根目录
Module选项
自我总结: 这个选项是对你的代码做预受理(preprocessors),就是在生成bundle.js之前对代码做处理，比如：babel-loader: ES6或7转ES5之类的活都由loader们去做。这个选项之所以存在是因为webpack不知道如何去处理他不认识的比如image、ts等等的文件，但是loader知道如何去处理，所以这部分工作就交给loader了。
PS: 1、 由于从webpack从1升级到2,我们也需要注意loaders已经因为兼容性的问题被升级成了rules。另外就是执行顺序的说法也困扰了我好久，不过最后从项目中慢慢试出来了。由于rules是个对象，根本就不存在什么顺序问题，但是在use数组中，这个 就存在顺序问题了，而且顺序蛮奇怪的，是从下到上(from bottom to top),从右向左（from right to left）,跟我们平时的认知是不一样的
2、 还有一个管道的概念：用 ！链接的loader可以这样写 ->css-loader!sass-loader意思就是先通过sass-loader去加载，然后出来的结果再去css-loader去加载，执行的顺序也是从右到左
angular2-template-loader
* 主要适用于angular2,一种webpack的链式加载器，内联组件的html和CSS到组件中
- 必要条件： 用这个loader时必须去挂载一个可以处理.html和.css的loader,官方推荐：raw-loader
- 主要作用: 把style和html改成加载式require()写法，nodejs里面也是这样去加载模块的， 这个实际上就是官网文档所说的相对于组件路径的问题，这里不讲述太多，你可以看官方文档
raw-loader
* 这个loader其实是这样的，它其实很好的印证了webpack不会干一些他不知道的东西，让loader们来做
- 比如txt文件, 你写个
import txt from 'file.txt', webpack就傻眼了，但你引入了这个插件， - 这样写
...test: /.txt$/,use: 'raw-loader'...，webpack就有能力处理了
json-loader
* 装载json文件的loader
css-loader
- 装载CSS的loader
- 亲自体验过这个loader之后也是大呼牛逼啊，这个最强大的地方是结合 style-loader 代码可以这样写
test: /.css$/, loader: 'style-loader!css-loader'
这句代码干嘛的呢？它其实做了俩件事，第一把component里引入的css拿过来，然后放到打包后的component里，
在component生成时可以动态的将css以<style><style>标签的形式插入到head中，这样就做到了组件化！
to-string-loader
* 返回内容格式为string的文件
sass-loader
- 编译SCSS到CSS
file-loader
- 装载jpg、png、gif图片或字体文件的loader
tslint-loader
- 装载typescript的loader
- options: {
configFile: '配置文件地址'
}
Plugins选项
自我总结：大多数情况他们都是后处理器(post processes)，意味着bundle.js已经生成，然后对文件做一些混淆和压缩啊等等的工作。实际上这个选项是非常强大的，通常loader做不了的，都交给Plugins去做，并且它的权限相当的高，他有能力进入整个webpack的编译生命周期。
assets-webpack-plugin
- 一个可以提供打包后的文件路径并生成json的插件
- prettyPrint: 是否格式化JSON输出的可读性
CheckerPlugin
- awesome-typescript-loader提供的一个插件
- 启用此插件可以开一个进程去进行类型检查（typescript的缘故）, 因为是多线程，webpack不会等待它
CommonsChunkPlugin
- 是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块
- 这个插件起初我也很困惑。。跟着上面的视频走完后才明白，假如说你有俩个文件都引用了jquery, 如果不用这个插件，就算你的入口是这样写的
entry: { bundle: './src/index.js', vendor: ['jquery'] }
出口是这样写的：
output: { path: __dirname + '/build', filename: '[name].[chunkhash].js' }
，那么最终生成的文件无论是bundle.js 还是 vendor.js 都包含了jQuery.js，这个原因是因为webpack不会把俩者的公共模块的jQuery提取出来，他不会是因为他做不到，所以就需要强大的plugin提供帮助了！
有了这个插件，那么最终生成的vendor里面只有jquery，bundle.js只有你写的其他代码而不包含jQuery
CopyWebpackPlugin
- 这是一个webpack插件，将单个文件或整个目录复制到构建目录。
- 这个插件比较容易理解，就是你设置个from 和 to 后就把当前的目录里面的内容复制到打包后的目录了
- 我尝试了不写to，发现打包后的目录不包含文件夹，只包含内容
HtmlWebpackPlugin
- 非常有用的插件，自动将生成一个html文件，自动插入JS和CSS，这在文件名有hash时特别有用
- chunksSortMode: 允许控制chunks被打包塞进html的顺序.允许的值：
none|auto|dependency默认：auto - inject：打包塞进html的位置：head里面还是body底部
true | head | body | false
LoaderOptionsPlugin
- 它的用途是帮助人们从 webpack 1 迁移至 webpack 2
DefinePlugin
- 允许你创建一个在编译时可以配置的全局常量
- 字符串都用JSON.stringify包装一下
DllBundlesPlugin
- 一个用于将软件包组捆绑为DLL的Webpack插件
AddAssetHtmlPlugin
- 将HTML或CSS资源添加到html-webpack-plugin生成的HTML中
OptimizeJsPlugin
- 通过一些特殊的函数包装方法优化JS文件而完成更快的首次加载
ExtractTextPlugin
- 它会将所有的 入口chunk (entry chunks) 中的 require("style.css") 移动到分开的 css 文件。
因此，你的样式不再内联到 javascript 里面，但会放到一个单独的 css 包文件 (styles.css)当中。
如果你的样式文件大小较大，这会更快，因为样式文件会跟 javascript 包并行加载。
cache选项
定义：缓存生成的 webpack 模块和 chunk，来改善构建速度。缓存默认在观察模式(watch mode)启用。禁用缓存只需简单传入：
cache: false
devserver
定义：这个是个在发开模式下特别有用的小型服务器，以nodejs中的express搭建的，所以你可以配置他们
- port：指定要监听请求的端口号
- host: 指定使用一个 host。默认是 localhost
- historyApiFallback： 当使用HTML5 History API，任意的 404 响应可以提供为 index.html 页面
- watchOptions 与监视文件相关的控制选项
* aggregateTimeout：当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位
* poll: 通过传递 true 开启 polling，或者指定毫秒为单位进行轮询。
CLI(Command Line Interface)命令
- --config: 定义一个不同的配置文件。用它如果你想要定义不同于webpack.config.js并作为默认
- --progress: 用百分比打印编译过程
- --watch: 监控文件系统的变化
- --profile: 详细标明每个编译步骤花了多长时间
- --open: 用默认浏览器打开当前url(for webpack-dev-server 版本 > 2.0).
- --content-base: <file/directory/url/port>:内容的基地址
- --bail: 如果出现失败则放弃编译，而不是容忍它
devtool (地址：官网 -> 文档 -> 配置 -> 开发工具(Devtool) )
- 'cheap-module-source-map': 此选项控制是否生成，以及如何生成 Source Map。
Node原生变量
npm_lifecycle_event变量
- npm 提供一个npm_lifecycle_event变量，返回当前正在运行的脚本名称
Css里出现 @import '~地址'
- 表示的是引用node_modules里面的文件夹