Webpack源码分析

最新推荐文章于 2025-10-12 13:04:44 发布

原创

最新推荐文章于 2025-10-12 13:04:44 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #webpack源码 #源码分析 #流程

Webpack源码分析

在上一篇文章已经对webpack_cli启动过程进行了大致的分析，程序到最后就是执行webpack.run方法。现在对webpack的源码进行进一步的分析。

准备工作:
1、在github下载webpack的源码
2、在源码目录创建需要编译的源码和webpack.config.js配置

在这里插入图片描述

webpack/webpack-main/examples/demo

// build.js

const webpack = require("../../lib/webpack");
const config = require("./webpack.config");
const compiler = webpack(config);

compiler.run((err, stats) => {
	if (err) {
		console.error(err);
	} else {
		console.log(stats);
	}
});


// webpack.config.js

const path = require("path");
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
	mode: "development",
	devtool: "source-map",
	context: path.resolve(__dirname, "."),
	entry: "./src/main.js",
	output: {
		filename: "bundle.js",
		path: path.resolve(__dirname, "./build")
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				use: "babel-loader"
			}
		]
	},
	plugins: [
		new HtmlWebPackPlugin()
	]
};

// main.js
console.log("Hello Webpack");

3、配置node.js调试环境

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "s