跑一个hello nodejs程序，并使用webpack进行打包

最新推荐文章于 2024-07-23 10:56:05 发布

苛学加

最新推荐文章于 2024-07-23 10:56:05 发布

阅读量253

点赞数

分类专栏：前端展现文章标签： nodejs

本文链接：https://blog.csdn.net/xiaohui_brook/article/details/107846302

版权

前端展现专栏收录该内容

21 篇文章 0 订阅

订阅专栏

hello nodejs

我们使用HBuilderX创建一个web项目，取名为“helloNode”。

一、目录结构

helloNode
- js
  - main.js
  - module.js
- index.html

二、文件代码

main.js

var module = require('./module') // 引用模块，可省略 .js 后缀名
module.sum(); // 调用 module.js 中的函数

module.js

// node 模块化编程, 导出函数
module.exports = {
   param1:28655,
   param2:37433,
   sum:function(){
   	var result = this.param1+this.param2;
   	console.log('我是一个js模块,我可以秒算：'+this.param1+'+'+this.param1+'='+result+'。');
   }
}

index.html

<!DOCTYPE html>
<html lang="en">
   <head>
   	<meta charset="UTF-8">
   	<title>Demo</title>
   </head>
   <body>
   	<div>
   		<span>第一个node项目!</span>
   	</div>
   	<script src="./js/main.js"></script>
   </body>
</html>

源代码链接-点击跳转

三、访问页面

在HBuilderX中，点击右上角的预览，可以把这个项目使用老方法发布到局域网中。此时访问index.html发现页面内容正常，但是F12可见main.js中出现报错：
在这里插入图片描述
当然不行了，毕竟我们使用了node的特性。

四、node运行试试

在cmd中进入项目所在路径，使用node关键字调用js文件：
在这里插入图片描述
可以看到，main.js居然正常运行并打印了数据。
爽歪歪，好神奇！

五、webpack打包

刚刚我们试了node项目无法正常部署访问，那有个毛用？
马上，引入重点。
我们需要使用webpack对node项目进行打包编译，将相关js代码转换为普通浏览可以执行的代码。
在cmd中，使用webpack 关键字，将main.js编译为bundle.js。
在这里插入图片描述
编译完成后，我们的js目录下就多个了个bundle.js文件，它就是浏览器正常运行的脚本了。

此时，我们将index.html中引用main.js的地方改为bundle.js；再此使用浏览器访问index.html时：
在这里插入图片描述
页面正常，脚步运行也正常！
至此，我们的前端项目结构将发生重大变化。
原来混乱的脚本，将被一个一个模块规范的管理起来。
既方便了管理维护，又方便了代码互用。

苛学加

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跑一个hello nodejs程序，并使用webpack进行打包

helloNode我们使用HBuilderX创建一个web项目，取名为“helloNode”。目录结构helloNodejsmain.jsmodule.jsindex.html文件代码main.jsvar module = require('./module') // 引用模块，可省略 .js 后缀名module.sum(); // 调用 module.js 中的函数module.js// node 模块化编程, 导出函数module.exports = {
复制链接

扫一扫