Vue之webpack的安裝與配置及其簡單應用

時間 2020-08-01

標籤 vue webpack 安裝配置及其簡單應用简体版

原文原文鏈接

1、文件結構html

2、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>

3、a.jsnode

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);

4、b.jswebpack

 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};

5、webpack.config.jsweb

1 module.exports = {
2     // 入口文件，第一個依賴文件
3     entry:'./a',
4     // 出口文件，文件名和存放路徑
5     output:{
6         filename:'pack.js',
7         path:__dirname
8     }
9 }

6、瀏覽器運行效果npm

7、謝謝觀看，若有問題，歡迎交流json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。