

首页  思维导图  详情



webpack

2020-10-22 16:07:32   0  举报





仅支持查看

AI智能生成

webpack学习笔记

webpack

模版推荐

作者其他创作

大纲/内容

Entry and Context（入口配置及上下文）

Entry

字符串形式

数组形式

对象形式。key是chunk的名称，value是entry入口文件的地址（也可以是字符串数组）

多入口配置

function形式(动态入口、异步入口)

应用场景：根据用户的请求再来编译某些文件做到懒加载打包输出

Context

基础目录，为一个绝对路径，用于从配置中解析入口起点（entry point）和loader，例如之前entry的'./src/index.js'的‘.’代表context配置内容

Mode（模式）

定义：告知webpack使用相应环境的内置优化，为一个字符串。可能的值有：none、development、production（默认）。

production

webpack针对生产环境的默认配置，去掉调试时用的console、Debugger等等

development

webpack针对来发环境的默认配置，自动生成sourcemap文件

none

区别

“-”部分为默认配置，默认配置有：添加 TerserPlugin 做代码压缩、当 webpack 出错的时候不允许输出文件等等。

development 默认的配置有：添加 sourcemap 生成策略为 eval、使用原始 name 作为 module 的标识、使用原始 name 作为 chunk 的标识等等。

当设置成 none 的时候，所有的配置都将设置成为默认状态。

Output（输出）

output位于对象最顶级键（key），包括了一组选项，指示webpack如何去输出，以及在哪里输出你的bundle、asset和其他你所打包或使用webpack载入的任何内容

Module（模块）

module.noParse

module.rules

Rule.test

Rule.resource.test简写

Rule.include

Rule.resource.include简写

Rule.exclude

Rule.resource.exclude简写

Rule.issuer

这个选项可以用来将 loader 应用到一个特定模块或一组模块的依赖中。

Rule.resource

Ruke.resourceQuery

webpack 加载获取加载器的时候，会用当前模块来匹配 resourceQuery 条件，表示一个请求资源的参数，用法跟 Rule.test 一样。

Rule.use

可配置值

{     test: /.vue$/,     use: 'vue-loader', // 字符串形式 }

{     test: /.vue$/,     use: { // 对象形式         loader: 'vue-loader',         options: {}     } }

{     test: /.vue$/,     use: ['vue-loader'], // 数组形式 }

方法形式，options: {} // 参数定义

info对象的值

compiler：当前 webpack 的 compiler 对象

issuer：当前模块发布者的路径

realResource：当前 module 的绝对路径

resource：当前 module 的路径，一般情况下是等于 realResource 的，当 request 的添加了 !=! 的时候就不相等了

Rule.loader & Rule.options

Rule.loader 是 Rule.use: [ { loader } ] 的简写

{     test: /\.vue$/,     loader: 'vue-loader', // 使用 vue-loader 去加载     options: {} // 参数定义 },

Rule.use 跟 Rule.loader 关系就像是 Rule.test 跟 Rule.resource 关系一样，当只有一个 loader 去加载模块的时候，可以用 loader 去配置。但是如果还需要传递参数，该怎么配置呢？用 Rule.use 的时候我们可以用对象的形式传参

Rule.enforce

可能的值有："pre" | "post"

Resolve（解析）

resolve.alias

创建 import 或 require 中间 request 的别名，来确保模块引入变得更简单

文件中引入 ./src/notice-webpack.vue 可使用 '$NOTICE' 代替

resolve.mainFields

当从npm包中导入模块时，此选项将决定在 package.json 中使用哪个字段导入模块

resolve.extensions

自动解析确定的扩展。默认值为：['.wasm', '.mjs', '.js', '.json']

resolve.enforceExtension

如果为 true 将不允许有无扩展名的文件，这个选项其实就是 extendsion 选项的开关，同样也是尽量保持默认，不然也会出现意想不到的错误

resolve.modules

告诉 webpack 解析模块时应该搜索的目录有哪些，绝对路径和相对路径都能使用，但它们之间有一点差异

ResolveLoader（加载器解析）

webpack 加载 loader 的时候也是通过 resolve 去加载的，但是 webpack 单独把 loader 的配置抽离出来了，resolveLoader 选项与上面的 resolve 选项配置相同，但仅用于解析 webpack 的 loader 包

webpack-dev-server

实时更新服务

将 webpack 与实时更新的服务 webpack-dev-server 结合起来使用，用于快速开发应用程序，但仅限于开发环境中使用。

Plugins（插件）

 Collect

Get Started

webpack

 Collect

Get Started

Webpack原理与实践

 Collect

Get Started

webpack

 Collect

Get Started

Webpack





0 条评论

下一页