一、文件结构
二、index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 11 <!-- 在b.js中使用node的module.exports输出模块后，然后在a.js中使用require('./b')--> 12 <!-- 就可以实现a.js和b.js的数据共享了,也就不再需要引入b.js了 --> 13 <!-- 尽管如此，浏览器还是无法识别后端node语言，所以就需要webpack来实现 --> 14 <!-- webpack把node后端代码变成能让浏览器识别的前端语言，并且管理所有的依赖 --> 15 <!-- <script src="b.js"></script> --> 16 <!-- <script src="a.js"></script> --> 17 18 19 <!-- 关于安装和配置webpack --> 20 <!-- 21 一般使用局部安装（安装在某个项目内） 22 1. 初始化npm 23 npm init -y 24 生成package.json,npm就认为整个目录就是一个项目(模块)了 25 26 2. 用npm安装webpack 27 npm i webpack -D 或者 npm i webpack --save-dev 28 安装的webpack版本信息会在package.json中可以看到，表示安装成功 29 同时项目里会生成一个node_modules文件夹，其中目录下.bin/webpack 30 31 3.使用webpack来生成管理依赖的pack.js文件(文件名自定义即可) 32 a.首先将webpack的路径放进package.json的scripts属性里， 33 "scripts": { 34 //key可以自定义,在这里我使用pack来命名,会用于执行命令npm run pack 35 "pack":"node_modules/.bin/webpack" 36 }, 37 b.在项目内创建webpack.config.js文件，并做以下设置 38 module.exports = { 39 // 入口文件，第一个依赖文件 40 entry:'./a', 41 42 // 出口文件，文件名和存放路径(均可自定义) 43 //_dirname表示当前目录 44 output:{ 45 filename:'pack.js', 46 path:__dirname 47 } 48 49 c.引入pack.js文件 50 <script src="pack.js"></script> 51 52 d.命令行终端使用以下命令生成pack.js文件 53 npm run pack 54 55 e.在浏览器运行html文件 56 57 58 --> 59 60 <!-- 其中a.js是第一个依赖，也就是入口文件。 pack.js是管理所有依赖的文件 --> 61 <!-- 最后只需要引入一个webpack生成的pack.js文件就可以了 --> 62 <script src="pack.js"></script> 63 64 65 </body> 66 </html>
三、a.js
1 // 表示需要b.js文件里的msg变量 2 // var msg = require("./b").msg; 3 4 // console.log("msg:",msg); 5 6 // ES6新语法(注意：和上面node写法不能同时使用,否则报错！) 7 import {newMsg} from './b'; 8 9 console.log("newMsg:",newMsg);
四、b.js
1 var msg = 'Yo.'; 2 var newMsg = 1; 3 4 5 // 输出模块，其中这个模块对象里有一个msg属性，其值就是变量msg 6 //依赖b.js的a.js使用require('./b').msg来进行调用msg变量 7 // module.exports = {msg:msg}; 8 9 // ES6新语法(注意：和上面node写法不能同时使用，否则报错！) 10 export {newMsg};
五、webpack.config.js
1 module.exports = { 2 // 入口文件，第一个依赖文件 3 entry:'./a', 4 // 出口文件，文件名和存放路径 5 output:{ 6 filename:'pack.js', 7 path:__dirname 8 } 9 }
六、浏览器运行效果
七、谢谢观看，如有问题，欢迎交流