webpack4-js模块实现

最新推荐文章于 2025-03-03 13:15:00 发布
最新推荐文章于 2025-03-03 13:15:00 发布
阅读量685 收藏
点赞数 1
分类专栏： webpack 文章标签： webpack打包实现 js模块 依赖文件 单文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zl13015214442/article/details/96117592
版权
本文详细介绍了如何使用webpack4实现JS模块的打包，包括模块化的概念，webpack的功能，安装配置，以及如何处理单文件和有依赖关系的多个文件的打包过程。通过实践操作，展示了webpack如何将源代码转化、优化并合并成可执行文件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言：
ES6模块化是ECMA提出的JavaScript模块化规范，他在语言的层面上实现了模块化。浏览器厂商和node都宣布要原生支持该规范。他将逐渐取代上一篇所提到的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

采用ES6模块化导入和导出时的代码如下：

// 导入
import { name } from './person.js'
// 导出
export const name = 'zl';

ES6模块虽然是终极模块化方案，但他的缺点在于目前无法直接运行在大部分JavaScript运行环境下，必须通过工具转化成标准的ES5后才能够正常运行。webpack就是这样一种自动化构建工具，能够把源代码转化成发布到线上的可执行JavaScript、CSS、HTML代码，所以学习他的重要性不言而喻。

1. webpack

webpack能够做的事情有很多：

  • 代码转化（各种插件/loader）：ES6编译成ES5，LESS编译成CSS等；
  • 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等；
  • 代码分割：提取多个页面的公共代码、提取首屏不需要执行的部分代码让其异步加载；
  • 代码合并：在采用模块化的项目当中会有多个模块和文件，需要构建功能把模块分类合并成一个文件；
  • 自动刷新(devserver)：监听本地源代码的变化，自动重新构建、刷新浏览器；
  • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

在webpack中一切文件皆为模块，通过loader转化文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注于构建模块化项目。

2. 安装

  • 全局安装 npm install webpack -g
    但是这种安装不推荐，不同的人安装的版本不同时，打包会受到影响，打包不成功。

  • 本地安装
    npm init -y（这里的-y表示直接略过所有问答，全部采用默认答案）
    npm install webpack webpack-cli -D （开发依赖，只在开发环境下使用）

安装好之后的我们的文件目录下会多一个node_modules文件夹，其中的bin文件夹中有本次安装的webpack：
在这里插入图片描述

在src文件夹下我们创建a.js以及入口文件index.js：

// a.js
module.exports = "happy coding!"

// index.js
/* 入口文件 */
let str = require("./a.js");
console.log(str)

3. 打包并实现

下面我们执行一下打包操作：npx webpack，可以看到我们的文件目录中多了一个dist文件夹：
在这里插入图片描述
这里的main.js就是默认的打包出口。这里要强调一下在webpack3中需在webpack.config.js中配置是开发模式还是生产模式，默认在生产模式下打包出来的内容只有按一行显示，不会给压缩、换行。
在这里插入图片描述
在webpack4中，可以通过设置模式设置当前是开发模式还是生产模式：
在这里插入图片描述
执行命令：npx webpack --mode development
再来看生成的打包文件main.js中的内容：
在这里插入图片描述
而且打包出来的文件可以在浏览器使用，在src下新建index.html，引入main.js文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>practise</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<script src="main.js"></script>
</body>
</html>

运行一下，看下浏览器打印出的结果：
在这里插入图片描述
下面来看看打包出来的文件中的内容，在我们不引入其他模块了，在入口文件index.js中打印一行字符串，然后打包得到main.js文件，我们将main.js中核心的代码留下，其他的都删掉：

// main.js
(function(modules) {
	function __webpack_require__(moduleId) {  // moduleId代表文件名
		var module =  {
			exports: {}
		};
		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		return module.exports;
	}
	return __webpack_require__("./src/index.js");
})
({
  "./src/index.js":
  (function(module, exports) {
    eval("console.log(\"hello, coder!\");\n\n//# sourceURL=webpack:///./src/index.js?");
  })
});

整体来看核心代码就是一个自执行函数，传入的参数是一个对象，属性是"./src/index.js"，值即为后面所跟的函数，这个对象会传到函数参数modules中。在自执行函数中定义了函数__webpack_require__，然后返回一个执行该函数的结果，传入的是一个文件名 "./src/index.js"，所以moduleId就代表文件名。然后新建了一个对象module ，通过modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);取传入的modules的属性值，即：

(function(module, exports) {
    eval("console.log(\"hello, coder!\");\n\n//# sourceURL=webpack:///./src/index.js?");
 })

并执行，最后返回执行结果：return module.exports;。可以看出，这就是我们在模块化规范简单实现中实现的req，见https://blog.youkuaiyun.com/zl13015214442/article/details/96109681。

4. 实现webpack中js的模块

我们自己实现一个类似这样的webpack，在根目录下新建文件夹zlpack->bin->zlpack.js
在这里插入图片描述
我们的目标是在命令行输入zlpack回车也能像webpack那样自动打包，我们知道在npm全局安装的都可以在命令行中使用，首先得有package.json，在zlpack路径下npm init -y：
在这里插入图片描述
这样在该目录下就有了package.json文件，其中bin这个字段表示执行zlpack命令的时候执行的是bin目录下zlpack这个文件：
在这里插入图片描述
下面关键的一步是我们需要把我们构造的zlpack这个文件夹引入到npm全局命令下，执行npm link：
在这里插入图片描述
此时我们在zlpack.js中写一段js代码：console.log('hello zlpack');，然后在命令行执行zlpack，会提示：
在这里插入图片描述
是因为我们没有说明当前文件是js文件，所以npm分辨不出，而js文件应该用node运行，所以应该在zlpack.js添加一行：

#! /usr/bin/env node  // 就是解决了不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件。
console.log('hello zlpack');

然后重新链接一下，再执行zlpack：
在这里插入图片描述
可见已经成功执行zlpack.js文件。那么此时我们就可以在任意目录下使用zlpack这样一个命令了。
下面我们就要实现webpack打包的过程了，首先最后会生成我们在之前的main.js中分析的那个自执行函数，我们当做模板粘到zlpack.js中，并定义入口和出口文件，要实现将内容打包到出口文件中：

#! /usr/bin/env node
// 这个文件就要描述如何打包
// 入口文件
let entry = '../src/index.js';  
// 出口文件
let output = '../dist/main.js';
let fs = require('fs');
let script = fs.readFileSync(entry, 'utf8');
let templpate = `
(function(modules) {
	function __webpack_require__(moduleId) {
		var module = {
			exports: {}
		};
		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		return module.exports;
	}
	return __webpack_require__("./src/index.js");
})
({
  "./src/index.js":
  (function(module, exports) {
    eval("console.log(\"hello, coder!\");\n\n//# sourceURL=webpack:///./src/index.js?");
  })
});`

接下来要把template中的内容替换掉，分别替换成我们定义的出口文件和入口文件，用ejs实现比较方便，首先安装ejs：
在这里插入图片描述
然后看一下ejs的使用：

let ejs = require('ejs');
let name = '100';
console.log(ejs.render('<a><%-name%></a>', {name}));

执行这段代码（也可以直接zlpack），可以看到已经将name这个变量塞到a标签中，并渲染出来。
下面了解了ejs的使用后就可以进行替换了：
在替换eval()中的内容时，我们考虑到eval执行一个字符串是不能保留原本的换行的，所以用EES6中的模板字符串来替换，模板字符串中的换行和空格是被保留的。而我们在template外面已经使用了模板字符串，eval中再使用的时候要反斜杠进行转义，下面为替换结果：

#! /usr/bin/env node
// 这个文件就要描述如何打包
// 入口文件
let entry = '../src/index.js';  
// 出口文件
let output = '../dist/main.js';
let fs = require('fs');
let script = fs.readFileSync(entry, 'utf8');
let ejs = require('ejs');
let templpate = `
(function(modules) {
	function __webpack_require__(moduleId) {
		var module = {
			exports: {}
		};
		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		return module.exports;
	}
	return __webpack_require__("<%-entry%>");
})
({
  "<%-entry%>":
  (function(module, exports) {
    eval(\`<%-script%>\`);
  })
});`
// 使用ejs来渲染template
let result = ejs.render(templpate, {
    entry,
    script
});
// result为替换后的结果 最终要写入到output当中
fs.writeFileSync(output, result);
console.log('编译成功');

执行一下zlpack，运行结果：
在这里插入图片描述
说明已经打包成功了，内容已经写入了main.js中，下面我们来看生成的main.js文件内容：
在这里插入图片描述
可以看出生成了和webpack打包生成的类似文件，下面我们在浏览器执行（index.html中引入main.js），看能否有结果：
在这里插入图片描述
至此，我们就实现了一个单文件的打包过程。

4. 有依赖关系的多个js文件的打包实现

比如我们src下的入口文件index.js中require了同级的a.js文件，建立了依赖关系：

// index.js
let result = require('./a.js');
console.log(result);

// a.js
module.exports = "happy coding!"

同样，我们首先看一下源码是怎么打包的，执行npx webpack：
在这里插入图片描述
来看生成的main.js文件，还是将核心的代码留下，其他删掉：

(function(modules) { 
	function __webpack_require__(moduleId) {
		var module = {
			exports: {}
		};
		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		return module.exports;
	}
	return __webpack_require__("./src/index.js");
})
  ({
    "./src/a.js": (function(module, exports) {
      eval("module.exports = \"happy coding!\"\r\n\n\n//# sourceURL=webpack:///./src/a.js?");
    }),
    "./src/index.js": (function(module, exports, __webpack_require__) {
      eval("let result = __webpack_require__(/*! ./a.js */ \"./src/a.js\");\r\nconsole.log(result);\n\n//# sourceURL=webpack:///./src/index.js?");
    })
  });

可见有依赖的过程和单个文件的大包过程分析起来也大同小异，在立即执行函数中最后返回执行结果：

return __webpack_require__("./src/index.js")；

首先执行index.js，由传入立即执行函数的对象

({
    "./src/a.js": (function(module, exports) {
      eval("module.exports = \"happy coding!\"\r\n\n\n//# sourceURL=webpack:///./src/a.js?");
    }),
    "./src/index.js": (function(module, exports, __webpack_require__) {
      eval("let result = __webpack_require__(/*! ./a.js */ \"./src/a.js\");\r\nconsole.log(result);\n\n//# sourceURL=webpack:///./src/index.js?");
    })
  })

可以看出，执行index.js对应的函数中的eval时，又执行了一遍

__webpack_require__(/*! ./a.js */ \"./src/a.js\")

在这个过程中就执行了index.js所依赖的模块a.js，最后返回执行后的结果。
下面我们来实现一下带有依赖模块的打包文件，将我们上一个单文件的zlpack.js存为zlpack1.js，然后再新建zlpack.js文件：

#! /usr/bin/env node
// 这个文件就要描述如何打包
let entry = '../src/index.js';  
let output = '../dist/main.js';
let fs = require('fs');
let path = require('path');
let ejs = require('ejs');
let script = fs.readFileSync(entry, 'utf8');
// 存放我们匹配到的路径以及该路径对应的内容 来处理依赖关系
let modules = [];
// 在这里我们要判断读取的index.js文件内容script中是否有require('./a.js')
// 然后将require('./a.js')替换成require('../src/a.js')
script = script.replace(/require\(['"](.+?)['"]\)/g, function() {
    // 将路径拼接成../src/a.js
    let name = path.join('../src', arguments[1]);  
    // 读取../src/a.js文件中的内容
    let content = fs.readFileSync(name, 'utf8');
    modules.push({
        name,
        content
    });
    return `__webpack_require__('${name}')`;
});
let template = `
(function(modules) { 
	function __webpack_require__(moduleId) {
		var module = {
			exports: {}
		};
		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		return module.exports;
	}
	return __webpack_require__("<%-entry%>");
})
  ({
   "<%-entry%>": (function(module, exports, __webpack_require__) {
     eval(\`<%-script%>\`);
    })
    <%for(let i=0; i<modules.length; i++) {
        let module = modules[i];%>,
        "<%-module.name%>": (function(module, exports, __webpack_require__) {
            eval(\`<%-module.content%>\`);
        })
    <%}%>
  });`
// 使用ejs来渲染template
let result = ejs.render(template, {
    entry,
    script,
    modules
});
// result为替换后的结果 最终要写入到output当中
fs.writeFileSync(output, result);
console.log('编译成功');

主要区别在于要在一开始判断入口文件index.js中的内容是否有require关键字引入其他的依赖文件，然后将其路径进行替换，并且得到依赖文件中的内容用于之后在template中用ejs进行替换渲染。最后执行zlpack：
在这里插入图片描述
来看一下生成的main.js文件打包内容：

(function(modules) { 
	function __webpack_require__(moduleId) {
		var module = {
			exports: {}
		};
		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		return module.exports;
	}
	return __webpack_require__("../src/index.js");
})
  ({
   "../src/index.js": (function(module, exports, __webpack_require__) {
     eval(`let result = __webpack_require__('..\src\a.js');
console.log(result);`);
    }), 
    "..\src\a.js": (function(module, exports, __webpack_require__) {
      eval(`module.exports = "happy coding!"`);
    })
  });

我们试一下看是否能在浏览器中执行（index.html）：
在这里插入图片描述
可见入口文件index.js所依赖的a.js文件已被执行，并打印出内容。
至此，我们关于有依赖的webpack打包流程就简单的实现了，暂时还没有涉及到更深入的plugin和loader的编译打包过程。

webpack-使用webpack-dev-server.rar
04-12
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它在开发过程中将各种资源（如 JavaScript、CSS、图片等）视为模块，并根据依赖关系进行编译和打包。`webpack-dev-server` 是 Webpack 提供的一个本地...
webpack-virtual-modules：Webpack虚拟模块是一个Webpack插件，通过它可以创建，修改和删除内存中文件，从而使Webpack像对待文件中的文件一样对待它们
02-06
Webpack虚拟模块是一个插件，可以动态生成用于使用Webpack创建JavaScript构建的内存中虚拟模块。 创建虚拟模块时，也会创建所有导致模块文件名的父虚拟目录。 该插件支持监视模式，这意味着webpack可以看到对虚拟...
浅入webpack4 高效简单的配置
weixin_44083712的博客
05-13 2270
前言 在vue-cli3中已经将webpack等详细配置（config）去除，我们配置webpack只能在vue.config.js里进行配置，这里我个人总结了一套webpack的优化方案模板并且附有我个人的讲解（尚在研究中）。 总体优化这几个方面： 提升生产打包的构建速度 拆分每个 npm 包 将稳定的第三方库（体积比较大的）改用cdn引入，不进行打包 安装可视化打包分析器（可选） 1.提升生产打包的构建速度 首先，你要知道运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpa
04 webpack4.0学习笔记——配置文件_url-loader使用
X北辰北的博客
06-13 3269
概述 在介绍完配置文件中的入口和出口基本操作流程后，接下来我们介绍loader的基本使用，本文主要介绍url-loader的使用流程。 loader 用于对模块的源代码进行转换。loader 可以使你在import或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将...
webpack配置教程
最新发布
wl_qianduan的博客
03-03 1418
webpack快速入门教程 1、webpack 介绍 什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler)。 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理 它将根据模块的依赖关系进行静态分析，生成对应的静态资源 五个核心概念 Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 Output：output
由浅入深配置webpack4
油墨香^-^的博客
03-30 677
webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugins。
vue.config.js中configureWebpack遇见的坑
lamianT的博客
04-08 5415
放一张vue cli文档上面的描述 ???? 但是configureWebpack中用函数形式去修改resolve，会不生效，如下所示： 在网上找的解决方案不能解决，还是报错???? configureWebpack: (config) => { Object.assign(config, { // 开发生产共同配置 resolve: { alias: { '@': path.resolve(__dirname, './s
webpack配置（vue）
weixin_30388677的博客
08-29 350
Vue-loader 　　Vue-loader 是一个加载器，能把 .vue 文件转换为js模块。 　　Vue Loader 的配置和其它的 loader 不太一样。除了将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，还需要在 webpack 配置中添加 Vue Loader 的插件 npm install -D vue-loader vue...
webpack-node-externals：轻松排除Webpack中的节点模块
02-06
Webpack节点模块外部 轻松排除Webpack中的节点模块 Webpack允许您定义组件-不应捆绑的模块。 与后端的Webpack捆绑在一起时-通常，您不想捆绑其node_modules依赖项。 这个库创建的外部函数忽略node_modules中的...
vue-webpack4-template:使用Webpack 4的VueJs模板
05-14
该存储库是itnext.io上“ Vue.js和Webpack 4从头开始”文章系列的。 ： 使用webpack-dev-server进行热模块加载 使用eslint整理 使用手写笔进行CSS预处理 使用@ vue / test-utils和Jest进行测试 ： 用于添加预处理...
webpack—-js的静态模块打包器
01-08
**webpack——JavaScript的静态模块打包器** webpack是一个强大的前端构建工具，主要功能是对JavaScript应用程序进行模块打包。它能够将各种类型的资源（如JavaScript、CSS、图片等）视为模块，并将它们整合进一个...
Vue CLI4.0 webpack配置属性——lintOnSave、configureWebpack、chainWebpack、parallel
热门推荐
Jay的博客
04-29 2万+
目录lintOnSave用途用法configureWebpack官方文档说明：用途用法chainWebpack用途用法 lintOnSave Type: boolean | 'warning' | 'default' | 'error' Default: true 用途 设置是否在开发环境下每次保存代码时都启用 eslint验证。 value： false：关闭每次保存都进行检测 true：...
Webpack4 配置 Output
liujun2son
07-15 2740
Webpack4 配置 Output output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。output 是一个 object，里面包含一系列配置项，下面分别介绍它们。 简单案例：( webpa...
实战 webpack 4 配置解析四
userkang的博客
11-12 2620
WEBPACK.PROD.JS 解析 现在让我们看看我们的 webpack.prod.js 配置文件，它包含了我们正在处理项目时用于生产构建的所有设置。它与 webpack.common.js 中的设置合并，形成一个完整的 webpack 配置。 // webpack.prod.js - production builds const LEGACY_CONFIG = 'legacy'; const...
关于webpack.config.js的分离写法
Mr_cui_的博客
05-24 273
1.需用用到一个包来协助。webpack-merge --save–dev 2. dev环境配置 build环境配置 公共的环境配置 3. 引入公共环境配置 利用这个包对dev/build和公共的配置进行拼接。 4. const webpackMerge = require('webpack-merge'); const baseConfig = require('./base.config.js') module.exports = webpackMerge(baseConfig,{ //webpac
webpack4.x 配置下载第三方库,分离js成单个文件引入HTML 第十节
xyphf的博客
04-07 8490
使用第三库:  1. 直接npm下载，然后引入（完全可以使用，但是我个人不是很推荐） cnpm i jquery -S import $ from 'jquery' $(xxxx).on() $(xxx).css() ProvidePlugin (个人推荐此方式) const webpack = require('webpack');
webpack4实用配置指南-上手篇
fengmin_w的博客
08-23 2万+
零、前言 算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感，比较捉急。工具用法的东西，好记性不如烂笔头，有必要系统梳理下webpack的配置常用配置以及构建优化。 分为上手篇和优化篇，本篇为上手篇，先介绍常用配置。 篇幅较长，可完整阅读，也可在遇到问题时即查即用。 此次采用webpack4，也顺便尝尝鲜。 # webpack4 把命令行工具抽离成了...
webpack4.x打包过程中因为图片的路径导致的问题
d295968572的博客
05-22 7827
在学习webpack加载图片时，想加载指定目录下的图片时，浏览器报错也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢?先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用file-loader来处理.再看下项目根目录结构：通过浏览器的报错信息可以发现, build.js为我们指定的这个图片的地址明显不正确,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值