webpack：系统的了解webpack一些核心概念

文章目录

- - [webpack 如何处理应用程序？](#webpack 如何处理应用程序？)
  - 何为webpack模块chunk？
  - 入口(entry)
  - 输出(output)
  - loader
  - - 开发loader
  - 插件(plugin)
  - - 简介
    - 流程
    - 插件开发：
    - Tapable类
    - 监听(watching)
    - [compiler 钩子](#compiler 钩子)
    - [compilation 钩子](#compilation 钩子)
    - compiler和compilation
    - [创建自定义插件](#创建自定义插件)
  - loader和plugins区别
  - 模式(mode)
  - 插件覆写文件
  - 一个项目同时使用多个webpack插件，插件的执行顺序是怎么样的
  - 附录：compiler和compilation基本数据结构相同

webpack 如何处理应用程序？

从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块（chunk）组合成一个或多个 bundles

何为webpack模块chunk？

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
stylesheet url(...) 或者 HTML <img src=...> 文件中的图片链接。

可以被这些引用的都算一个模块 chunk

Webpack 天生支持如下模块类型：

ECMAScript 模块
CommonJS 模块
AMD 模块
Assets
WebAssembly 模块

当遇到不支持的，可以编写 loader 使其支持。也就是说通过 loader 可以使 webpack 支持多种语言和预处理器语法编写的模块。

比如：

TypeScript【ts-loader】
Less/Sass【less-loader】
ES6【babel-loader】
Vue【vue-loader】
https://webpack.docschina.org/loaders

入口(entry)

入口默认是 ./src/index.js，可以在 entry 配置

输出(output)

默认值是 ./dist/main.js

loader

webpack 默认只能理解 JavaScript 和 JSON 文件，当需要处理其他文件时可以用loader。

在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

js 复制代码

// webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 use(使用) raw-loader 转换一下。
module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

loader 支持链式调用，数组里的 loader 反向执行从后往前，将其结果（也就是应用过转换后的资源）传递给下一个 loader。

开发loader

js 复制代码

module.exports = function (content) {
  console.log(content);
  return content + '123';
};

插件(plugin)

简介

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

js 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

示例中，html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。

流程

webpack 的整体流程可以分为 env > init > compiler > make > seal > emit > done

env 和 init 阶段负责初始化环境和激活 webpack 内部插件

compiler 阶段是编译的开始

make 阶段 webpack 会进行依赖分析和收集

seal 阶段 webpack 会生成 chunk 文件

emit 阶段 webpack 会把 chunks 写入硬盘

done 阶段，顾名思义就会 webpack 工作完成啦

插件开发：

https://webpack.docschina.org/api/plugins

Compiler 模块是 webpack 的主要引擎，它通过 CLI 或者 Node API 传递的所有选项创建出一个 compilation 实例。它扩展（extends）自 Tapable 类，用来注册和调用插件。大多数面向用户的插件会首先在 Compiler 上注册。https://webpack.docschina.org/api/compiler-hooks/#hooks

Tapable类

这个小型库是 webpack 的一个核心工具，提供类似的插件接口，也是一个 npm 包。有点像一个发布订阅的工具。

在 webpack 中的许多对象都扩展自 Tapable 类。它对外暴露了 tap，tapAsync 和 tapPromise 等方法，插件可以使用这些方法向 webpack 中注入自定义构建的步骤

https://github.com/webpack/tapable

监听(watching)

监听时，compiler 会触发诸如 watchRun, watchClose 和 invalid 等额外的事件。通常在开发环境中使用，也常常会在 webpack-dev-server 这些工具的底层调用，由此开发人员无须每次都使用手动方式重新编译。

compiler 钩子

以下生命周期钩子函数，是由 compiler 暴露

js 复制代码

compiler.hooks.someHook.tap('MyPlugin', (params) => {
  /* ... */
});

tap 不止是 tap，也可以在某些钩子上访问 tapAsync 和 tapPromise，具体看Tapable。

someHook 可以是以下钩子函数：

1、environment：在编译器准备环境时调用，时机就在配置文件中初始化插件之后。

2、afterEnvironment：当编译器环境设置完成后，在 environment hook 后直接调用。

3、entryOption：在 webpack 选项中的 entry 被处理过之后调用。

js 复制代码

compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
  /* ... */
});

4、afterPlugins：在初始化内部插件集合完成设置之后调用。

5、initialize：当编译器对象被初始化时调用。

6、beforeRun：在开始执行一次构建之前调用，compiler.run 方法开始执行后立刻进行调用。

7、run：在开始读取 records 之前调用。

8、watchRun：在监听模式下，一个新的 compilation 触发之后，但在 compilation 实际开始之前执行。

9、compile：beforeCompile 之后立即调用，但在一个新的 compilation 创建之前。这个钩子不会被复制到子编译器。

10、compilation：compilation 创建之后执行。

11、emit：输出 asset 到 output 目录之前执行。这个钩子不会被复制到子编译器。

12、done：在 compilation 完成时执行。这个钩子不会被复制到子编译器。

13、failed：在 compilation 失败时调用。

14、shutdown：当编译器关闭时调用。

完整钩子：https://webpack.docschina.org/api/compiler-hooks/#hooks

compilation 钩子

compiler 创建的 compilation 实例。在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、分块(chunk)、哈希(hash)和重新创建(restore)。

钩子函数：

1、buildModule：在模块构建开始之前触发，可以用来修改模块。

js 复制代码

compilation.hooks.buildModule.tap(
  'SourceMapDevToolModuleOptionsPlugin',
  (module) => {
    module.useSourceMap = true;
  }
);

2、succeedModule：模块构建成功时执行。

3、optimize：优化阶段开始时触发。

4、optimizeChunks：在 chunk 优化阶段开始时调用。插件可以 tap 此钩子对 chunk 执行优化。

完整钩子：https://webpack.docschina.org/api/compilation-hooks/

compiler和compilation

Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。

webpack 编译会创建两个核心对象：

compiler ：包含了 webpack 环境所有的配置信息，包括了 options，loader，plugin，和 webpack 整个生命周期有关的钩子。
compilation: 作为 plugin 内置事件回调函数的参数，包含了当前的模块资源，编译生成资源，变化的文件以及被跟踪的文件的状态信息，当检测到了一个文件发生了改变的时候，就会生成一个新的 Compilation 对象。

Compiler 对象包含了 Webpack 环境所有的的配置信息，包含 options，loaders，plugins 这些信息，这个对象在 Webpack 启动时候被实例化，它是全局唯一的，可以简单地把它理解为 Webpack 实例；
Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象。

创建自定义插件

插件必须是一个函数或者是一个包含了 apply 方法的对象，这样才能够访问 Compiler 对象。
传给每一个插件的 compiler 和 compilation 对象都是同一个应用，因此不建议修改。
异步的事件需要在插件处理完任务和调用回调函数通知 webpack 进入下一个流程，不然会卡住。

js 复制代码

class MyPlugin {
    // Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply (compiler) {
    // 找到合适的事件钩子，实现自己的插件功能
    compiler.hooks.emit.tap('MyPlugin', compilation => {
        // compilation: 当前打包构建流程的上下文
        console.log(compilation);
        
        // do something...
    })
  }
}

在 emit 事件发生的时候，代表源文件的转换和组装已经完成，可以读取到最终将输出的资源，代码块，模块，依赖，并且可以修改输出资源的内容。

loader和plugins区别

loader运行在项目打包之前；
plugins运行在整个项目的编译时期；

loader 即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。比如将 A.less 转换成 B.css

plugins 基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。

模式(mode)

通过选择 development, production 或 none 之中的一个

插件覆写文件

以下是一个简单的示例，这个插件会在Webpack处理文件时，将所有的JavaScript代码转换为CoffeeScript代码：

js 复制代码

const Tapable = require('tapable');  
const coffee = require('coffee-script');  
  
class CoffeeScriptPlugin {  
  constructor(options) {  
    this.options = options || {};  
  }  
  
  apply(compiler) {  
    compiler.hooks.emit.tapAsync('CoffeeScriptPlugin', (compilation, callback) => {  
      Object.keys(compilation.assets).forEach((data) => {  
        if (/\.js$/.test(data)) {  
          const content = compilation.assets[data].source();  
          const coffeeScript = coffee.compile(content, {bare: true});  
          compilation.assets[data] = {  
            source: () => coffeeScript,  
            size: () => coffeeScript.length,  
          };  
        }  
      });  
      callback();  
    });  
  }  
}  
  
module.exports = CoffeeScriptPlugin;

在这个示例中，我们首先创建了一个新的类CoffeeScriptPlugin，这个类继承自Tapable。然后，我们在apply方法中注册了一个在emit阶段执行的钩子函数。在这个钩子函数中，我们遍历了所有的资源，如果资源的名字以.js结尾，我们就用CoffeeScript编译这个资源的内容，然后用编译后的内容替换原来的内容。最后，我们调用callback函数来通知Webpack继续执行下一个阶段的任务。

一个项目同时使用多个webpack插件，插件的执行顺序是怎么样的

Webpack的插件系统是基于Tapable库实现的，该库为插件提供了可插拔的接口。因此，具体的插件执行顺序取决于Webpack事件流中的插件注册顺序以及触发时机。

插件通常在Webpack的配置文件（即webpack.config.js文件）中按照数组的形式进行声明。数组中的插件按照先后顺序执行。例如：

javascript 复制代码

module.exports = {  
  //...  
  plugins: [  
    new HtmlWebpackPlugin(),  
    new CleanWebpackPlugin(),  
    //...  
  ],  
};

在上面的示例中，首先执行HtmlWebpackPlugin插件，然后执行CleanWebpackPlugin插件。

然而，这只是一部分真相。Webpack的编译过程中存在许多生命周期钩子，例如'compilation', 'optimize', 'emit',等等。插件可能会绑定到一个或多个钩子上。这意味着插件的执行可能会分布在Webpack的整个编译周期中，取决于它们选择"绑定"的那些钩子。

如果两个插件绑定到同一个钩子，那么在webpack.config.js中先声明的插件将先执行。然而，如果一个插件绑定到了早期的钩子（例如'compilation'），而另一个插件绑定到了较晚的钩子（例如'emit'），那么即使在webpack.config.js中后声明的插件也将先执行，因为'compilation'阶段在'emit'阶段之前。

综上，Webpack插件的执行顺序主要取决于两个因素：它们在webpack.config.js文件中的声明顺序，以及它们绑定的钩子在Webpack编译周期中的触发顺序。

附录：compiler和compilation基本数据结构相同

完整对象：

js 复制代码

const a = {
  _backCompat: true,
  hooks: {},
  name: undefined,
  startTime: undefined,
  endTime: undefined,
  compiler: {},
  resolverFactory: {},
  inputFileSystem: {},
  fileSystemInfo: {},
  valueCacheVersions: Map(16) {
    'webpack/DefinePlugin DC_APP_DOMAIN_MCP' => '"https://xx.xxx.com"',
    ...
  },
  requestShortener: {},
  compilerPath: '',
  logger: {
  },
  options: {},
  outputOptions: {},
  bail: false,
  profile: false,
  params: {
    normalModuleFactory: NormalModuleFactory {
      hooks: [Object],
      resolverFactory: [ResolverFactory],
      ruleSet: [Object],
      context: '/Users/zhangyu/web/yongliu/sub-test-ddd/src',
      fs: [CachedInputFileSystem],
      _globalParserOptions: [Object],
      _globalGeneratorOptions: {},
      parserCache: [Map],
      generatorCache: [Map],
      _restoredUnsafeCacheEntries: Set(0) {},
      _parseResourceWithoutFragment: [Function (anonymous)]
    },
    contextModuleFactory: ContextModuleFactory {
      hooks: [Object],
      resolverFactory: [ResolverFactory]
    }
  },
  mainTemplate: MainTemplate {},
  chunkTemplate: ChunkTemplate {},
  runtimeTemplate: RuntimeTemplate {},
  moduleTemplates: {},
  moduleMemCaches: undefined,
  moduleMemCaches2: undefined,
  moduleGraph: {},
  chunkGraph: {},
  codeGenerationResults: {},
  processDependenciesQueue: {},
  addModuleQueue: AsyncQueue {},
  factorizeQueue: AsyncQueue {},
  buildQueue: AsyncQueue {},
  rebuildQueue: AsyncQueue {},
  creatingModuleDuringBuild: { },
  entries: Map(9) {
    'app' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    'pages/index/index' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    'components/loading-page/index' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    'pages/use-chart/index' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    'subpackage-echarts/ec-canvas/ec-canvas' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    'subpackage-echarts/index/index' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    './app.scss__assets_chunk_name__' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    './pages/index/index.scss__assets_chunk_name__' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    },
    './components/loading-page/index.scss__assets_chunk_name__' => {
      dependencies: [Array],
      includeDependencies: [],
      options: [Object]
    }
  },
  globalEntry: {
    dependencies: [],
    includeDependencies: [],
    options: { name: undefined }
  },
  entrypoints: Map(9) {
    'app' => Entrypoint {
      groupDebugId: 5000,
      options: [Object],
      _children: [SortableSet [Set]],
      _parents: [SortableSet [Set]],
      _asyncEntrypoints: [SortableSet [Set]],
      _blocks: [SortableSet [Set]],
      chunks: [Array],
      origins: [Array],
      _modulePreOrderIndices: [Map],
      _modulePostOrderIndices: [Map],
      index: 0,
      _runtimeChunk: [Chunk],
      _entrypointChunk: [Chunk],
      _initial: true
    },
    'pages/index/index' => Entrypoint {
      groupDebugId: 5001,
      options: [Object],
      _children: [SortableSet [Set]],
      _parents: [SortableSet [Set]],
      _asyncEntrypoints: [SortableSet [Set]],
      _blocks: [SortableSet [Set]],
      chunks: [Array],
      origins: [Array],
      _modulePreOrderIndices: [Map],
      _modulePostOrderIndices: [Map],
      index: 1,
      _runtimeChunk: [Chunk],
      _entrypointChunk: [Chunk],
      _initial: true
    }
  },
  asyncEntrypoints: [],
  chunks: Set(8) {
    Chunk {
      id: 3,
      ids: [Array],
      debugId: 1000,
      name: 'app',
      idNameHints: [SortableSet [Set]],
      preventIntegration: false,
      filenameTemplate: undefined,
      cssFilenameTemplate: undefined,
      _groups: [SortableSet [Set]],
      runtime: 'runtime',
      files: [SetDeprecatedArray [Set]],
      auxiliaryFiles: Set(0) {},
      rendered: true,
      hash: '4cdafb006e29619975268c54d16ace97',
      contentHash: [Object: null prototype],
      renderedHash: '4cdafb006e2961997526',
      chunkReason: undefined,
      extraAsync: false
    },
    Chunk {
      id: 6,
      ids: [Array],
      debugId: 1001,
      name: 'pages/index/index',
      idNameHints: [SortableSet [Set]],
      preventIntegration: false,
      filenameTemplate: undefined,
      cssFilenameTemplate: undefined,
      _groups: [SortableSet [Set]],
      runtime: 'runtime',
      files: [SetDeprecatedArray [Set]],
      auxiliaryFiles: Set(0) {},
      rendered: true,
      hash: '2df8c7afeffa5b8fa0439233e61f494c',
      contentHash: [Object: null prototype],
      renderedHash: '2df8c7afeffa5b8fa043',
      chunkReason: undefined,
      extraAsync: false
    }
  },
  chunkGroups: [
    Entrypoint {
      groupDebugId: 5000,
      options: [Object],
      _children: [SortableSet [Set]],
      _parents: [SortableSet [Set]],
      _asyncEntrypoints: [SortableSet [Set]],
      _blocks: [SortableSet [Set]],
      chunks: [Array],
      origins: [Array],
      _modulePreOrderIndices: [Map],
      _modulePostOrderIndices: [Map],
      index: 0,
      _runtimeChunk: [Chunk],
      _entrypointChunk: [Chunk],
      _initial: true
    },
    Entrypoint {
      groupDebugId: 5001,
      options: [Object],
      _children: [SortableSet [Set]],
      _parents: [SortableSet [Set]],
      _asyncEntrypoints: [SortableSet [Set]],
      _blocks: [SortableSet [Set]],
      chunks: [Array],
      origins: [Array],
      _modulePreOrderIndices: [Map],
      _modulePostOrderIndices: [Map],
      index: 1,
      _runtimeChunk: [Chunk],
      _entrypointChunk: [Chunk],
      _initial: true
    },
  ],
  namedChunkGroups: Map(9) {},
  namedChunks: Map(11) {},
  modules: Set(41) {},
  _modules: Map(41) {},
  records: {},
  additionalChunkAssets: [],
  assets: {
    'app.wxss': RawSource {
      _valueIsBuffer: true,
      _value: <Buffer >,
      _valueAsBuffer: <Buffer >,
      _valueAsString: undefined
    },
    'pages/index/index.wxss': RawSource {
      _valueIsBuffer: true,
      _value: <Buffer >,
      _valueAsBuffer: <Buffer >,
      _valueAsString: undefined
    },
    'app.js': CachedSource {
      _source: [ConcatSource],
      _cachedSourceType: undefined,
      _cachedSource: undefined,
      _cachedBuffer: undefined,
      _cachedSize: undefined,
      _cachedMaps: Map(0) {},
      _cachedHashUpdate: undefined
    },
    'pages/index/index.js': CachedSource {
      _source: [ConcatSource],
      _cachedSourceType: undefined,
      _cachedSource: undefined,
      _cachedBuffer: undefined,
      _cachedSize: undefined,
      _cachedMaps: Map(0) {},
      _cachedHashUpdate: undefined
    },
    'runtime.js': CachedSource {
      _source: [ConcatSource],
      _cachedSourceType: undefined,
      _cachedSource: undefined,
      _cachedBuffer: undefined,
      _cachedSize: undefined,
      _cachedMaps: Map(0) {},
      _cachedHashUpdate: undefined
    },
    'common.js': CachedSource {
      _source: [ConcatSource],
      _cachedSourceType: undefined,
      _cachedSource: undefined,
      _cachedBuffer: undefined,
      _cachedSize: undefined,
      _cachedMaps: Map(0) {},
      _cachedHashUpdate: undefined
    }
  },
  assetsInfo: Map(27) {
    'app.wxss' => { sourceFilename: 'app.scss' },
    'components/loading-page/index.wxss' => { sourceFilename: 'components/loading-page/index.scss' },
    'pages/index/index.wxss' => { sourceFilename: 'pages/index/index.scss' },
    'app.js' => { javascriptModule: false },
    'pages/index/index.js' => { javascriptModule: false },
    'components/loading-page/index.js' => { javascriptModule: false },
    'pages/use-chart/index.js' => { javascriptModule: false },
    'subpackage-echarts/ec-canvas/ec-canvas.js' => { javascriptModule: false },
    'subpackage-echarts/index/index.js' => { javascriptModule: false },
    'runtime.js' => { javascriptModule: false },
    'common.js' => { javascriptModule: false },
    'app.json' => { copied: true, sourceFilename: 'app.json' },
    'sitemap.json' => { copied: true, sourceFilename: 'sitemap.json' },
    'pages/use-chart/index.json' => { copied: true, sourceFilename: 'pages/use-chart/index.json' },
    'pages/use-chart/index.wxml' => { copied: true, sourceFilename: 'pages/use-chart/index.wxml' },
    'pages/use-chart/index.wxss' => { copied: true, sourceFilename: 'pages/use-chart/index.wxss' },
    'pages/index/index.json' => { copied: true, sourceFilename: 'pages/index/index.json' },
    'pages/index/index.wxml' => { copied: true, sourceFilename: 'pages/index/index.wxml' },
    'subpackage-echarts/ec-canvas/ec-canvas.json' => {
      copied: true,
      sourceFilename: 'subpackage-echarts/ec-canvas/ec-canvas.json'
    },
  },
  _assetsRelatedIn: Map(0) {},
  errors: [],
  warnings: [
  ],
  children: [],
  logging: Map(9) {
  },
  dependencyFactories: Map(30) {
  },
  childrenCounters: {},
  usedChunkIds: null,
  usedModuleIds: null,
  needAdditionalPass: false,
  _restoredUnsafeCacheModuleEntries: Set(0) {},
  _restoredUnsafeCacheEntries: Map(0) {},
  builtModules: WeakSet { <items unknown> },
  codeGeneratedModules: WeakSet { <items unknown> },
  buildTimeExecutedModules: WeakSet { <items unknown> },
  _rebuildingModules: Map(0) {},
  emittedAssets: Set(0) {},
  comparedForEmitAssets: Set(0) {},
  fileDependencies: LazySet {
  },
  contextDependencies: LazySet {
  },
  missingDependencies: LazySet {
    
  },
  buildDependencies: LazySet {
  },
  compilationDependencies: { add: [Function: deprecated] },
  fullHash: 'af34423fe7957198c3b73910476385cd',
  hash: 'af34423fe7957198c3b7'
}

options对象

js 复制代码

{
    amd: undefined,
    bail: undefined,
    cache: {
      type: 'filesystem',
      allowCollectingMemory: false,
      maxMemoryGenerations: Infinity,
      maxAge: 5184000000,
      profile: false,
      buildDependencies: [Object],
      cacheDirectory: '/Users/zhangyu/web/yongliu/sub-test-ddd/node_modules/.cache/webpack',
      cacheLocation: '/Users/zhangyu/web/yongliu/sub-test-ddd/node_modules/.cache/webpack/default-none',
      hashAlgorithm: 'md4',
      compression: false,
      idleTimeout: 60000,
      idleTimeoutForInitialStore: 5000,
      idleTimeoutAfterLargeChanges: 1000,
      name: 'default-none',
      store: 'pack',
      version: '',
      memoryCacheUnaffected: false
    },
    context: '/Users/zhangyu/web/yongliu/sub-test-ddd/src',
    dependencies: undefined,
    devServer: undefined,
    devtool: false,
    entry: { main: [Object] },
    experiments: {
      buildHttp: undefined,
      lazyCompilation: undefined,
      css: undefined,
      futureDefaults: false,
      backCompat: true,
      topLevelAwait: false,
      syncWebAssembly: false,
      asyncWebAssembly: false,
      outputModule: false,
      layers: false,
      cacheUnaffected: false
    },
    externals: undefined,
    externalsPresets: {
      web: true,
      node: false,
      nwjs: false,
      electron: false,
      electronMain: false,
      electronPreload: false,
      electronRenderer: false
    },
    externalsType: 'var',
    ignoreWarnings: undefined,
    infrastructureLogging: {
      stream: [WriteStream],
      level: 'info',
      debug: false,
      colors: true,
      appendOnly: false
    },
    loader: { target: 'web' },
    mode: 'none',
    module: {
      noParse: undefined,
      unsafeCache: [Function (anonymous)],
      parser: [Object],
      generator: {},
      defaultRules: [Array],
      rules: [Array]
    },
    name: undefined,
    node: { global: true, __filename: 'mock', __dirname: 'mock' },
    optimization: {
      splitChunks: [Object],
      runtimeChunk: [Object],
      emitOnErrors: true,
      removeAvailableModules: false,
      removeEmptyChunks: true,
      mergeDuplicateChunks: true,
      flagIncludedChunks: false,
      moduleIds: 'natural',
      chunkIds: 'natural',
      sideEffects: 'flag',
      providedExports: true,
      usedExports: false,
      innerGraph: false,
      mangleExports: false,
      concatenateModules: false,
      checkWasmTypes: false,
      mangleWasmImports: false,
      portableRecords: false,
      realContentHash: false,
      minimize: false,
      minimizer: [Array],
      nodeEnv: false
    },
    output: {
      assetModuleFilename: '[hash][ext][query]',
      asyncChunks: true,
      charset: true,
      chunkFilename: '[name].js',
      chunkFormat: 'array-push',
      chunkLoading: 'jsonp',
      chunkLoadingGlobal: 'webpackChunk',
      chunkLoadTimeout: 120000,
      cssFilename: '[name].css',
      cssChunkFilename: '[name].css',
      clean: undefined,
      compareBeforeEmit: true,
      crossOriginLoading: false,
      devtoolFallbackModuleFilenameTemplate: undefined,
      devtoolModuleFilenameTemplate: undefined,
      devtoolNamespace: '',
      environment: [Object],
      enabledChunkLoadingTypes: [Array],
      enabledLibraryTypes: [],
      enabledWasmLoadingTypes: [Array],
      filename: '[name].js',
      globalObject: 'wx',
      hashDigest: 'hex',
      hashDigestLength: 20,
      hashFunction: 'md4',
      hashSalt: undefined,
      hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
      hotUpdateGlobal: 'webpackHotUpdate',
      hotUpdateMainFilename: '[runtime].[fullhash].hot-update.json',
      iife: true,
      importFunctionName: 'import',
      importMetaName: 'import.meta',
      scriptType: false,
      library: undefined,
      module: false,
      path: '/Users/zhangyu/web/yongliu/sub-test-ddd/weapp',
      pathinfo: false,
      publicPath: '/Users/zhangyu/web/yongliu/sub-test-ddd/weapp',
      sourceMapFilename: '[file].map[query]',
      sourcePrefix: undefined,
      strictModuleExceptionHandling: false,
      trustedTypes: undefined,
      uniqueName: '',
      wasmLoading: 'fetch',
      webassemblyModuleFilename: '[hash].module.wasm',
      workerChunkLoading: 'import-scripts',
      workerWasmLoading: 'fetch'
    },
    parallelism: 100,
    performance: false,
    plugins: [
      [CLIPlugin],
      [CleanWebpackPlugin],
      [CopyPlugin],
      [MinaWebpackPlugin],
      MinaRuntimeWebpackPlugin {},
      [DefinePlugin]
    ],
    profile: false,
    recordsInputPath: false,
    recordsOutputPath: false,
    resolve: {
      byDependency: [Object],
      cache: true,
      modules: [Array],
      conditionNames: [Array],
      mainFiles: [Array],
      extensions: [Array],
      aliasFields: [],
      exportsFields: [Array],
      roots: [Array],
      mainFields: [Array],
      alias: [Object]
    },
    resolveLoader: {
      cache: true,
      conditionNames: [Array],
      exportsFields: [Array],
      mainFields: [Array],
      extensions: [Array],
      mainFiles: [Array]
    },
    snapshot: {
      resolveBuildDependencies: [Object],
      buildDependencies: [Object],
      resolve: [Object],
      module: [Object],
      immutablePaths: [],
      managedPaths: [Array]
    },
    stats: { preset: 'normal', colors: true },
    target: 'web',
    watch: true,
    watchOptions: {}
  }

outputOptions

js 复制代码

{
    assetModuleFilename: '[hash][ext][query]',
    asyncChunks: true,
    charset: true,
    chunkFilename: '[name].js',
    chunkFormat: 'array-push',
    chunkLoading: 'jsonp',
    chunkLoadingGlobal: 'webpackChunk',
    chunkLoadTimeout: 120000,
    cssFilename: '[name].css',
    cssChunkFilename: '[name].css',
    clean: undefined,
    compareBeforeEmit: true,
    crossOriginLoading: false,
    devtoolFallbackModuleFilenameTemplate: undefined,
    devtoolModuleFilenameTemplate: undefined,
    devtoolNamespace: '',
    environment: {
      arrowFunction: true,
      const: true,
      destructuring: true,
      forOf: true,
      bigIntLiteral: undefined,
      dynamicImport: undefined,
      module: undefined
    },
    enabledChunkLoadingTypes: [ 'jsonp', 'import-scripts' ],
    enabledLibraryTypes: [],
    enabledWasmLoadingTypes: [ 'fetch' ],
    filename: '[name].js',
    globalObject: 'wx',
    hashDigest: 'hex',
    hashDigestLength: 20,
    hashFunction: 'md4',
    hashSalt: undefined,
    hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
    hotUpdateGlobal: 'webpackHotUpdate',
    hotUpdateMainFilename: '[runtime].[fullhash].hot-update.json',
    iife: true,
    importFunctionName: 'import',
    importMetaName: 'import.meta',
    scriptType: false,
    library: undefined,
    module: false,
    path: '/Users/zhangyu/web/yongliu/sub-test-ddd/weapp',
    pathinfo: false,
    publicPath: '/Users/zhangyu/web/yongliu/sub-test-ddd/weapp',
    sourceMapFilename: '[file].map[query]',
    sourcePrefix: undefined,
    strictModuleExceptionHandling: false,
    trustedTypes: undefined,
    uniqueName: '',
    wasmLoading: 'fetch',
    webassemblyModuleFilename: '[hash].module.wasm',
    workerChunkLoading: 'import-scripts',
    workerWasmLoading: 'fetch'
  }

webpack：系统的了解webpack一些核心概念

文章目录

webpack 如何处理应用程序？

何为webpack模块chunk？

入口(entry)

输出(output)

loader

开发loader

插件(plugin)

简介

流程

插件开发：

Tapable类

监听(watching)

compiler 钩子

compilation 钩子

compiler和compilation

创建自定义 插件

loader和plugins区别

模式(mode)

插件覆写文件

一个项目同时使用多个webpack插件，插件的执行顺序是怎么样的

附录：compiler和compilation基本数据结构相同

完整对象：

options对象

outputOptions

创建自定义插件