之前已经简单的了解了webpack配置文件loader插件如何安装

这里统一加一个名词解释

名词解释

参数 说明 备注
mode 项目环境 webpack4.0中出的模式概念,可以传入development(开发环境)/production(生产环境),理解为可以通过不同的config文件来分别配置生产与测试环境
entry 项目入口 webpack开始打包的入口文件,打包这个文件里,引用的其他包,及引入的包所再次引入的包,每个html文档只使用一个依赖图,也就是entry
output 项目出口 webpack打包完成后,输出的文件,可以使用webpack占位符占位符
module 开发中每一个文件都可以看做 module,模块不局限于 js,也包含 css、图片等 使校验、调试、测试、扩展、复用都轻而易举 例如:什么是模块
loader 模块转化器,模块的处理器,对模块进行转换处理 提供了处理前端构建步骤的强大方法,如将额外的语言typescript转化为javascript,将图片转换为base64格式来减少一次请求等 loader使用方式
plugin 扩展插件,插件可以处理 chunk,也可以对最后的打包结果进行处理,可以完成 loader 完不成的任务 插件是 webpack 的支柱功能,由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例。
context 上下文,也是基础目录,绝对路径,用于从配置中解析入口起点(entry point)和 loader 默认值为path.resolve(__dirname, “app”),也就是当前路径 如何修改context

webpack占位符

模板 描述
[hash] 模块标识符(module identifier)的 hash
[chunkhash] chunk 内容的 hash
[name] 模块名称
[id] 模块标识符(module identifier)
[query] 模块的 query,例如,文件名 ? 后面的字符串

什么是模块

  1. ES2015 中的 import 语句
  2. CommonJS 中的 require() 语句
  3. AMD definerequire 语句
  4. css/sass/less 文件中的 @import 语句。
  5. 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

loader使用方式

  1. 配置(推荐):在 webpack.config.js 文件中指定 loader,这样在维护的时候,只需要查找这一个文件即可。
  2. 内联:在每个 import 语句中显式指定 loader。
  3. CLI:在 shell 命令中指定它们。

如何修改context

1
2
3
4
// webpack.config.js
module.exports = {
context: '一个绝对路径'
};

备注:context是一切打包的相对地址,所以这个值,一定要填写一个绝对地址,默认为当前目录