Webpack学习笔记

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: 一、 因为从webpack从1升级到2,咱们也须要注意loaders已经由于兼容性的问题被升级成了rules。另外就是执行顺序的说法也困扰了我很久，不过最后从项目中慢慢试出来了。因为rules是个对象，根本就不存在什么顺序问题，可是在use数组中，这个 就存在顺序问题了，并且顺序蛮奇怪的，是从下到上(from bottom to top),从右向左（from right to left）,跟咱们平时的认知是不同的
二、 还有一个管道的概念：用 ！连接的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: :内容的基地址
• --bail: 若是出现失败则放弃编译，而不是容忍它

---

devtool (地址：官网 -> 文档 -> 配置 -> 开发工具(Devtool) )

• 'cheap-module-source-map': 此选项控制是否生成，以及如何生成 Source Map。

---

Node原生变量

npm_lifecycle_event变量

• npm 提供一个npm_lifecycle_event变量，返回当前正在运行的脚本名称

Css里出现 @import '~地址'

• 表示的是引用node_modules里面的文件夹

　TO BE Continue...