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

拼搏现实的明天。 2022-11-25 00:36 209阅读 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中出现报错：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]  
当然不行了，毕竟我们使用了node的特性。

## 四、node运行试试 ##

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

## 五、webpack打包 ##

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

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

[-]: https://gitee.com/Yxiaohui/helloNode.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]: /images/20221124/e2663e9657ce46cfbfb0bc668b27d14f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 1]: /images/20221124/0bb93f3255e7493e95c0574a8a8e6107.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 2]: /images/20221124/68f824f97d4641d8a7178f171a38c719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 3]: /images/20221124/464a3c6632fd48d197adba5e0688d886.png