之前已经简单的了解了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 define 和 require 语句
  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是一切打包的相对地址，所以这个值，一定要填写一个绝对地址，默认为当前目录