webpack
2018-08-16 09:30:29 0 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
学习webpack的一些知识网络
作者其他创作
大纲/内容
分支主题
webpack
四个核心概念
入口（entry）
定义
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
可以通过配置entry指定一个或多个入口起点
默认值：./src
简单例子
出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
示例
output.filename
webpack bundle 的名称
output.path
bundle 生成(emit)到哪里
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
目标
test 属性
用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性
表示进行转换时，应该使用哪个 loader。
使用方法
配置（推荐）
首先安装相对应的 loader
然后设置test与use
注意该设置再module.rules下
内联
可以在 import 语句或任何等效于 \"import\" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。
通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader。
选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{\"key\":\"value\
CLI
loader 特性
loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
oader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。
总结
loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多能力。 用户现在可以更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译和其他更多。
解析loader
loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。通常使用 npm 进行管理，但是也可以将自定义 loader 作为应用程序中的文件。按照约定，loader 通常被命名为 xxx-loader（例如 json-loader）。有关详细信息，请查看如何编写 loader？。
插件(plugin)
插件则可以用于执行范围更广的任务
目的
在于解决loader无法实现的其他事
使用步骤
npm安装
require
添加到plugin数组中
多数插件可以通过option自定义
你也可以在一个配置文件中因为不同目的而多次使用同一个插件
这时需要通过使用 new 操作符来创建它的一个实例。
剖析
webpack 插件是一个具有 apply 属性的 JavaScript 对象
apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
配置
模式
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
用法
基本配置
导出多个配置
模块
模块解析
webpack 中的解析规则
绝对路径
由于我们已经取得文件的绝对路径，因此不需要进一步再做解析。
相对路径
在这种情况下，使用 import 或 require 的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require 中给定的相对路径，会添加此上下文路径(context path)，以产生模块的绝对路径(absolute path)。
模块路径
模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径，此替换路径通过使用 resolve.alias 配置选项来创建一个别名。
补充
Module
noParse
让Webpack忽略对部分没采用模块化的文件的递归解析和处理
parser
可以精确到语法层面
0 条评论
回复 删除
下一页
