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

 TO BE Continue...

转载于:https://www.cnblogs.com/xhy-steve/p/6591426.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值