Vue之webpack的安装与配置及其简单应用

程序员文章站 2022-07-03 10:10:46

一、文件结构二、index.html 1 2 3 4 5 6

一、文件结构

二、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 }

六、浏览器运行效果

本文地址：https://blog.csdn.net/kwame211/article/details/107377062