webpack构建的详细流程探底(2)

第二步: 调用 webpack,返回 compiler 对象的过程(lib/webpack.js)

如下图所示,lib/webpack.js 中的关键函数为 webpack,其中定义了编译相关的一些操作。

"use strict";
const Compiler = require("./Compiler");
const MultiCompiler = require("./MultiCompiler");
const NodeEnvironmentPlugin = require("./node/NodeEnvironmentPlugin");
const WebpackOptionsApply = require("./WebpackOptionsApply");
const WebpackOptionsDefaulter = require("./WebpackOptionsDefaulter");
const validateSchema = require("./validateSchema");
const WebpackOptionsValidationError = require("./WebpackOptionsValidationError");
const webpackOptionsSchema = require("../schemas/webpackOptionsSchema.json");
// 核心方法,调用该方法,返回Compiler的实例对象compiler
function webpack(options, callback) {...}
exports = module.exports = webpack;
// 设置webpack对象的常用属性
webpack.WebpackOptionsDefaulter = WebpackOptionsDefaulter;
webpack.WebpackOptionsApply = WebpackOptionsApply;
webpack.Compiler = Compiler;
webpack.MultiCompiler = MultiCompiler;
webpack.NodeEnvironmentPlugin = NodeEnvironmentPlugin;
webpack.validate = validateSchema.bind(this, webpackOptionsSchema);
webpack.validateSchema = validateSchema;
webpack.WebpackOptionsValidationError = WebpackOptionsValidationError;
// 对外暴露一些插件
function exportPlugins(obj, mappings) {...}
exportPlugins(exports, {...});
exportPlugins(exports.optimize = {}, {...});

接下来看在webpack函数中主要定义了哪些操作

// 核心方法,调用该方法,返回Compiler的实例对象compiler
function webpack(options, callback) {
 // 验证是否符合格式
 const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchema, options);
 if(webpackOptionsValidationErrors.length) {
 throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
 }
 let compiler;
 // 传入的options为数组的情况,调用MultiCompiler进行处理,目前还没遇到过这种情况的配置
 if(Array.isArray(options)) {
 compiler = new MultiCompiler(options.map(options => webpack(options)));
 } else if(typeof options === "object") {
 // 配置options的默认参数
 new WebpackOptionsDefaulter().process(options);
 // 初始化一个Compiler的实例
 compiler = new Compiler();
 // 设置context的默认值为进程的当前目录,绝对路径
 compiler.context = options.context;
 // 定义compiler的options属性
 compiler.options = options;
 // Node环境插件,其中设置compiler的inputFileSystem,outputFileSystem,watchFileSystem,并定义了before-run的钩子函数
 new NodeEnvironmentPlugin().apply(compiler);
 // 应用每个插件
 if(options.plugins && Array.isArray(options.plugins)) {
 compiler.apply.apply(compiler, options.plugins);
 }
 // 调用environment插件
 compiler.applyPlugins("environment");
 // 调用after-environment插件
 compiler.applyPlugins("after-environment");
 // 处理compiler对象,调用一些必备插件
 compiler.options = new WebpackOptionsApply().process(options, compiler);
 } else {
 throw new Error("Invalid argument: options");
 }
 if(callback) {
 if(typeof callback !== "function") throw new Error("Invalid argument: 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 || {});
 return compiler.watch(watchOptions, callback);
 }
 compiler.run(callback);
 }
 return compiler;
}
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/236.html