webpack之基础教程

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

//compiler hook 的 tap 方法的第一个参数，应该是驼峰式命名的插件名称。
class ConsoleLogOnBuildWebpackPlugin { // ? 了解compiler.hooks的用法
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log('webpack 构建过程开始！');
    });
  }
}

Compiler 模块是 webpack 的支柱引擎，它通过 CLI 或 Node API 传递的所有选项，创建出一个 compilation 实例

以下生命周期钩子函数，是由 compiler 暴露，可以通过如下方式访问

compiler.hooks.someHook.tap(/* ... */);

取决于不同的钩子类型，也可以在某些钩子上访问 tapAsync 和 tapPromise

钩子的类型，可以查看文档（https://github.com/webpack/tapable#hook-types）

2. webpack 中的解析规则

使用 enhanced-resolve，webpack 能够解析三种文件路径

模块将在 resolve.modules 中指定的所有目录内搜索

//绝对路径;由于我们已经取得文件的绝对路径，因此不需要进一步再做解析。

//相对路径；使用 import 或 require 的资源文件所在的目录，被认为是上下文目录(context directory)。在 import/require 中给定的相对路径，会拼接此上下文路径(context path)，以产生模块的绝对路径。

//模块路径；模块将在 resolve.modules 中指定的所有目录内搜索。 你可以替换初始模块路径，此替换路径通过使用 resolve.alias 配置选项来创建一个别名。

如果路径具有文件扩展名，则被直接将文件打包。

否则，将使用 [resolve.extensions] 选项作为文件扩展名来解析，此选项告诉 resolver 在解析中能够接受哪些扩展名（例如 .js, .jsx）

3. 缓存

每次文件系统访问都会被缓存，以便更快触发对同一文件的多个并行或串行请求。在观察模式(watch mode)下，只有修改过的文件会从缓存中摘出。如果关闭观察模式，会在每次编译前清理缓存。

watch 和 watchOptions

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/
  }
};

// react-dev-utils

module.exports = function ignoredFiles(appSrc) {
  return new RegExp(
    `^(?!${escape(
      path.normalize(appSrc + '/').replace(/[\]+/g, '/')
    )}).+/node_modules/`,
    'g'
  );
};