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: :内容的基地址
- --bail: 如果出现失败则放弃编译,而不是容忍它
devtool (地址:官网 -> 文档 -> 配置 -> 开发工具(Devtool) )
- 'cheap-module-source-map': 此选项控制是否生成,以及如何生成 Source Map。
Node原生变量
npm_lifecycle_event变量
- npm 提供一个npm_lifecycle_event变量,返回当前正在运行的脚本名称
Css里出现 @import '~地址'
- 表示的是引用node_modules里面的文件夹