webpack的打包流程

// webpack.js
const webpack = (options, callback) => {
  let compiler

  // 补全默认配置
  options = new WebpackOptionsDefaulter().process(options)

  // 创建 compiler 对象
  compiler = new Compiler(options.context)
  compiler.options = options

  // 应用用户通过 webpack.config.js 配置或命令行参数传递的插件
  if (options.plugins && Array.isArray(options.plugins)) {
    for (const plugin of options.plugins) {
      plugin.apply(compiler)
    }
  }

  // 根据配置，应用 webpack 内置插件
  compiler.options = new WebpackOptionsApply().process(options, compiler)

  // compiler 启动
  // 这个方法调用了 compile 方法，而 compile 触发了 make 这个事件，控制权转移到 compilation
  compiler.run(callback)
  return compiler
}

// WebpackOptionsApply.js
class WebpackOptionsApply extends OptionsApply {
  process(options, compiler) {
    new EntryOptionPlugin().apply(compiler)
    compiler.hooks.entryOption.call(options.context, options.entry)
  }
}

// EntryOptionPlugin.js
const itemToPlugin = (context, item, name) => {
  if (Array.isArray(item)) {
    return new MultiEntryPlugin(context, item, name)
  }
  return new SingleEntryPlugin(context, item, name)
}

module.exports = class EntryOptionPlugin {
  apply(compiler) {
    compiler.hooks.entryOption.tap('EntryOptionPlugin', (context, entry) => {
      if (typeof entry === 'string' || Array.isArray(entry)) {
        // 如果没有指定入口的名字，那么默认为 main
        itemToPlugin(context, entry, 'main').apply(compiler)
      } else if (typeof entry === 'object') {
        for (const name of Object.keys(entry)) {
          itemToPlugin(context, entry[name], name).apply(compiler)
        }
      } else if (typeof entry === 'function') {
        new DynamicEntryPlugin(context, entry).apply(compiler)
      }
      // 注意这里返回了 true,
      return true
    })
  }
}

// SingleEntryPlugin.js
class SingleEntryPlugin {
  constructor(context, entry, name) {
    this.context = context
    this.entry = entry
    this.name = name
  }

  apply(compiler) {
    //触发时机： compiler 在 run 方法中调用了 compile 方法，在该方法中创建了 compilation 对象
    compiler.hooks.compilation.tap('SingleEntryPlugin', (compilation, { normalModuleFactory }) => {
      // 设置 dependency 和 module 工厂之间的映射关系
      compilation.dependencyFactories.set(SingleEntryDependency, normalModuleFactory)
    })

    // 触发时机：compiler 创建 compilation 对象后，触发 make 事件
    compiler.hooks.make.tapAsync('SingleEntryPlugin', (compilation, callback) => {
      const { entry, name, context } = this

      // 根据入口文件和名称创建 Dependency 对象
      const dep = SingleEntryPlugin.createDependency(entry, name)

      // 随着这个方法被调用，将会开启编译流程
      compilation.addEntry(context, dep, name, callback)
    })
  }

  static createDependency(entry, name) {
    const dep = new SingleEntryDependency(entry)
    dep.loc = { name }
    return dep
  }
}

// Compiler.js
class Compiler extends Tapable {
  run(callback) {
    const onCompiled = (err, compilation) => {
      // ...
    }
    // 调用 compile 方法
    this.compile(onCompiled)
  }

  compile(callback) {
    const params = this.newCompilationParams()
    this.hooks.compile.call(params)
    // 创建 compilation 对象
    const compilation = this.newCompilation(params)
    // 触发 make 事件钩子，控制权转移到 compilation，开始编译流程
    this.hooks.make.callAsync(compilation, err => {
      // ...
    })
  }

  newCompilation(params) {
    const compilation = this.createCompilation()
    // compilation 对象创建后，触发 compilation 事件钩子
    // 如果想要监听 compilation 中的事件，这是个好时机
    this.hooks.compilation.call(compilation, params)
    return compilation
  }
}

class Compilation extends Tapable {
  // 如果有留意 SingleEntryPlugin 的源码，应该知道这里的 entry 不是字符串，而是 Dependency 对象
  // 根据entry(依赖dependency)获取对应模块工厂（moduleFactory），
  //通过模块工厂（moduleFactory.create()）创建对一个模块
  addEntry(context, entry, name, callback) {
    
    this._addModuleChain(context, entry, onModule, callbak)
  }

  _addModuleChain(context, dependency, onModule, callback) {
    const Dep = dependency.constructor
    // 获取模块对应的工厂，这个映射关系在 SingleEntryPlugin 中有设置
    const moduleFactory = this.dependencyFactories.get(Dep)
    // 通过工厂创建模块
    moduleFactory.create(/*
      在这个方法的回调中，
      调用 this.buildModule 来构建模块。
      构建完成后，调用 this.processModuleDependencies 来处理模块的依赖
      这是一个循环和递归过程，通过依赖获得它对应的模块工厂来构建子模块，直到把所有的子模块都构建完成
    */)
  }

  buildModule(module, optional, origin, dependencies, thisCallback) {
    // 构建模块
    module.build(/*
    而构建模块作为最耗时的一步，又可细化为三步：
    1. 调用各 loader 处理模块之间的依赖
    2. 解析经 loader 处理后的源文件生成抽象语法树 AST
    3. 遍历 AST，获取 module 的依赖，结果会存放在 module 的 dependencies 属性中
    */)
  }
}

class Compiler extends Tapable {
  compile(callback) {
    const params = this.newCompilationParams()
    this.hooks.compile.call(params)
    // 创建 compilation 对象
    const compilation = this.newCompilation(params)
    // 触发 make 事件钩子，控制权转移到 compilation，开始编译流程
    this.hooks.make.callAsync(compilation, err => {
      // 编译和构建流程结束后，回到这里，
      compilation.seal(err => {})
    })
  }
}

// https://github.com/webpack/webpack/blob/master/lib/Compilation.js#L1188
class Compilation extends Tapable {
  seal(callback) {
    // _preparedEntrypoints 在 addEntry 方法中被填充，
    //它存放着 entry 名称和对应的 entry module
    // 将 entry 中对应的 module 都生成一个新的 chunk
    for (const preparedEntrypoint of this._preparedEntrypoints) {
      const module = preparedEntrypoint.module
      const name = preparedEntrypoint.name
      // 创建 chunk
      const chunk = this.addChunk(name)
      // Entrypoint 继承于 ChunkGroup
      const entrypoint = new Entrypoint(name)
      entrypoint.setRuntimeChunk(chunk)
      entrypoint.addOrigin(null, name, preparedEntrypoint.request)

      this.namedChunkGroups.set(name, entrypoint)
      this.entrypoints.set(name, entrypoint)
      this.chunkGroups.push(entrypoint)

      // 建立 chunk 和 chunkGroup 之间的关系
      GraphHelpers.connectChunkGroupAndChunk(entrypoint, chunk)
      // 建立 chunk 和 module 之间的关系
      GraphHelpers.connectChunkAndModule(chunk, module)

      // 表明这个 chunk 是通过 entry 生成的
      chunk.entryModule = module
      chunk.name = name

      this.assignDepth(module)
    }
    // 遍历 module 的依赖列表，将依赖的 module 也加入到 chunk 中
    this.processDependenciesBlocksForChunkGroups(this.chunkGroups.slice())

    // 优化
    // SplitChunksPlugin 会监听 optimizeChunksAdvanced 事件，
    //抽取公共模块，形成新的 chunk
    // RuntimeChunkPlugin 会监听 optimizeChunksAdvanced 事件，
    // 抽离 runtime chunk
    while (
      this.hooks.optimizeChunksBasic.call(this.chunks, this.chunkGroups) ||
      this.hooks.optimizeChunks.call(this.chunks, this.chunkGroups) ||
      this.hooks.optimizeChunksAdvanced.call(this.chunks, this.chunkGroups)
    ) {
      /* empty */
    }
    this.hooks.afterOptimizeChunks.call(this.chunks, this.chunkGroups)

    // 哈希
    this.createHash()

    // 通过这个钩子，可以在生成 assets 之前修改 chunks，我们后面会用到
    this.hooks.beforeChunkAssets.call()

    // 通过 chunks 生成 assets
    this.createChunkAssets()
  }
}

class Compilation extends Tapable {
  // https://github.com/webpack/webpack/blob/master/lib/Compilation.js#L2373
  createChunkAssets() {
    // 每一个 chunk 会被渲染成一个 asset
    for (let i = 0; i < this.chunks.length; i++) {
      // 如果 chunk 包含 webpack runtime 代码，
      // 就用 mainTemplate 来渲染，否则用 chunkTemplate 来渲染
      // 关于什么是 webpack runtime,后续我们在优化小程序 webpack 插件时会讲到
      const template = chunk.hasRuntime() ? 
      this.mainTemplate : this.chunkTemplate
    }
  }
}

// https://github.com/webpack/webpack/blob/master/lib/MainTemplate.js
class MainTemplate extends Tapable {
  constructor(outputOptions) {
    super()
    this.hooks = {
      bootstrap: new SyncWaterfallHook(['source', 'chunk', 'hash', 'moduleTemplate', 'dependencyTemplates']),
      render: new SyncWaterfallHook(['source', 'chunk', 'hash', 'moduleTemplate', 'dependencyTemplates']),
      renderWithEntry: new SyncWaterfallHook(['source', 'chunk', 'hash']),
    }
    // 自身监听了 render 事件
    this.hooks.render.tap('MainTemplate', (bootstrapSource, chunk, hash, moduleTemplate, dependencyTemplates) => {
      const source = new ConcatSource()
      //  拼接 runtime 源码
      source.add(new PrefixSource('/******/', bootstrapSource))

      // 拼接 module 源码，mainTemplate 把渲染模块代码的职责委托给了
       moduleTemplate，自身只负责生成 runtime 代码
      source.add(this.hooks.modules.call(new RawSource(''), chunk, hash, moduleTemplate, dependencyTemplates))

      return source
    })
  }

  // 这是 Template 的入口方法
  render(hash, chunk, moduleTemplate, dependencyTemplates) {
    // 生成 runtime 代码
    const buf = this.renderBootstrap(hash, chunk, moduleTemplate, dependencyTemplates)

    // 触发 render 事件，请注意 MainTemplate 自身在构造函数中监听了这一事件，
       完成了对 runtime 代码和 module 代码的拼接
    let source = this.hooks.render.call(
      // 传入 runtime 代码
      new OriginalSource(Template.prefix(buf, ' \t') + '\n', 'webpack/bootstrap'),
      chunk,
      hash,
      moduleTemplate,
      dependencyTemplates,
    )

    // 对于每一个入口 module, 即通过 compilation.addEntry 添加的模块
    if (chunk.hasEntryModule()) {
      // 触发 renderWithEntry 事件，让我们有机会修改生成后的代码
      source = this.hooks.renderWithEntry.call(source, chunk, hash)
    }
    return new ConcatSource(source, ';')
  }

  renderBootstrap(hash, chunk, moduleTemplate, dependencyTemplates) {
    const buf = []
    // 通过 bootstrap 这个钩子，用户可以添加自己的 runtime 代码
    buf.push(this.hooks.bootstrap.call('', chunk, hash, moduleTemplate, dependencyTemplates))
    return buf
  }
}

// https://github.com/webpack/webpack/blob/master/lib/Compiler.js
class Compiler extends Tapable {
  run(callback) {
    const onCompiled = (err, compilation) => {
      // 输出文件
      this.emitAssets(compilation, err => {})
    }
    // 调用 compile 方法
    this.compile(onCompiled)
  }

  emitAssets(compilation, callback) {
    const emitFiles = err => {}
    // 在输入文件之前，触发 emit 事件，这是最后可以修改 assets 的机会了
    this.hooks.emit.callAsync(compilation, err => {
      outputPath = compilation.getPath(this.outputPath)
      this.outputFileSystem.mkdirp(outputPath, emitFiles)
    })
  }

  compile(onCompiled) {
    const params = this.newCompilationParams()
    this.hooks.compile.call(params)
    // 创建 compilation 对象
    const compilation = this.newCompilation(params)
    // 触发 make 事件钩子，控制权转移到 compilation，开始编译 module
    this.hooks.make.callAsync(compilation, err => {
      // 模块编译和构建完成后，开始生成 chunks 和 assets
      compilation.seal(err => {
        // chunks 和 assets 生成后，调用 emitAssets
        return onCompiled(null, compilation)
      })
    })
  }
}

1.npx webpack
2.options = new WebpackOptionsDefaulter().process(options)  // 补全默认配置 
3.compiler = new Compiler(options.context)  // 创建 compiler 对象  
4.compiler.options = options 
// 应用用户通过 webpack.config.js 配置或命令行参数传递的插件          
5.if (options.plugins && Array.isArray(options.plugins)) { 
    for (const plugin of options.plugins) {            
        plugin.apply(compiler)   
   }   
} 
6. WebpackOptionsApply.process（）
   6.1 entryOptionsPlugin.apply() //
       6.1.1 apply:compiler.hooks.entryOption.tap//绑定entryOption事件
             6.1.1.1 compiler.hooks.entryOption.tap ：执行如下两种方法
                    DynamicEntryPlugin.apply()
                    itemToPlugin.apply(){
                        if (Array.isArray(item)) { 
                        return new MultiEntryPlugin(context, item, name) 
                        }else{
                        return new SingleEntryPlugin(context, item, name)
                        }
                    }    
                    SingleEntryPlugin.apply(){
                       绑定了：compiler.hooks.compilation.tap() 
                       绑定了：compiler.hooks.make.tapAsync()
                    }  //参考如上SingleEntryPlugin.js  
                       
   6.2 compiler.hooks.entryOption.call()//触发entryOption事件
7.compiler.run（）
  7.1  const onCompiled = (err, compilation) => {
        // 输出文件
        this.emitAssets(compilation, err => {})
      }
  }
        7.1.1 emitAssets(compilation, callback) {
         const emitFiles = err => {}
        // 在输入文件之前，触发 emit 事件，这是最后可以修改 assets 的机会了
          this.hooks.emit.callAsync(compilation, err => {
          outputPath = compilation.getPath(this.outputPath)
          this.outputFileSystem.mkdirp(outputPath, emitFiles)
       })
  7.2 this.compile(onCompiled)// 调用 compile方法 
      7.2.1 const params = this.newCompilationParams()
      7.2.2 this.hooks.compile.call(params)
      7.2.3 // 创建 compilation 对象  //此时触发如上定义compilation钩子事件
            const compilation = this.newCompilation(params) 
      

// https://github.com/webpack/webpack/blob/master/lib/webpack.js#L62
const webpack = (options, callback) => {
  if (options.watch === true || (Array.isArray(options) && options.some(o => o.watch))) {
    const watchOptions = Array.isArray(options) ? options.map(o => o.watchOptions || {}) : options.watchOptions || {}
    // 如果执行了 watch 就不会执行 run
    return compiler.watch(watchOptions, callback)
  }
  compiler.run(callback)
  return compiler
}

 splitChunks: {
     chunks: 'all',
     name: 'common',
     minChunks: 2,
     minSize: 0,
   },

 const webpack = require('webpack');
 const debuggable = process.env.BUILD_TYPE !== 'release'
 module.exports = {
  plugins: [    
        new webpack.EnvironmentPlugin({
       NODE_ENV: JSON.stringify(process.env.NODE_ENV) || 'development',
       BUILD_TYPE: JSON.stringify(process.env.BUILD_TYPE) || 'debug',
     }),
  ],
  mode: debuggable ? 'none' : 'production',
}

 console.log(`环境：${process.env.NODE_ENV} 构建类型：${process.env.BUILD_TYPE}`) 

{
        test: /\.(less)$/,
        include: /src/,
        use: [
          {
            loader: 'file-loader',
            options: {
              useRelativePath: true,
              name: '[path][name].wxss',
              context: resolve('src'),
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions:{
                javascriptEnabled: false,
                includePaths: [resolve('src', 'styles'), resolve('src')],
              }
            },
          },
        ]
       },
     ]