前言：nodeJS的一大优点之一就是js文件的模块化。每一个js文件都可以是一个模块，这意味这我们在弄大型项目的时候，不再需要定义大量的全局变量了。
一、js文件的弊端
如果a.js文件要访问b.js里定义的变量的话，那b.js定义的变量得定义在全局，那样就会造成全局环境的污染。（如果全局定义的变量有重名的，会造成很大困扰）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <script src="a.js"></script> <script src="d.js"></script> <script> console.log(str + '--1'); a(); b(); </script> </head> <body> </body> </html>
// a.js
function a(){
console.log(str+' --a');
}
//b.js
var str = 'hello world';
function b(){
console.log(str + ' --b');
}
二、node模块概念
在一个模块(一个文件)中定义的变量，其作用域范围是当前模块，外部不能够直接的访问。如果想让一个模块能够访问另一个模块中定义的变量，可以通过module.exports对外提供访问。
//a.js
var str = require('./b').str;
console.log(str);
//b.js var str = 'hello world'; module.exports.str = str; //对外提供访问
在node的环境下运行a.js，会成功输出在b.js中定义的变量str，而不会说有全局环境污染的问题。
然后问题来了，这样的写法只能node上运行，无法运用到浏览器中。要怎么才能运用到浏览器中呢？这就运用到了webpack打包工具了。
三、webpack的使用
1、webpack安装到全局下的命令
①、安装webpack
在cmd终端输入
npm install webpack --g
②、输入webpack -v 检测是否安装成功
③、如果能显示webpackb版本信息，cd到项目目录中，输入打包命令
webpack a.js pack.js
这时项目中就多多出一个pack.js文件，只需要在index.html中引用pack.js。这时就会浏览器控制台中就会输出hello world了。
相关链接：webpack安装成功，但是打包失败原因
2、webpack安装到项目目录下的命令
①、cd到项目目录中
②、安装webpack
在cmd终端输入
npm init -y //创建package.json文件 npm install webpack --save-dev
③、输入webpack -v 检测是否安装成功
④、如果能显示webpackb版本信息，输入打包命令(window系统下命令)
.\\node_modules\\.bin\\webpack a.js pack.js
这时项目中就多多出一个pack.js文件。
相关链接：webpack安装成功，但是打包失败原因