Webpack学习笔记

input选项

Output选项

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选项

　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选项

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选项

devserver

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里面的文件夹

　TO BE Continue...