webpack
2020-10-22 16:07:32 0 举报AI智能生成
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: 'vue-loader', // 字符串形式
}
{
test: /.vue$/,
use: { // 对象形式
loader: 'vue-loader',
options: {}
}
}
test: /.vue$/,
use: { // 对象形式
loader: 'vue-loader',
options: {}
}
}
{
test: /.vue$/,
use: ['vue-loader'], // 数组形式
}
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: {} // 参数定义
},
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（插件）
0 条评论
下一页
为你推荐
查看更多
