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;
}
内容版权声明:除非注明,否则皆为本站原创文章。
