Vue(基礎七)_webpack打包工具用法(上)
一、前言
1、webpack原理
二、主要內容
1、webpack原理:
(1)官網圖:我們的項目有多個js, css文件的時候還需要考慮先引入哪一個後引入哪一個,因為這些js文件是相互依賴的,webpack是一個打包工具,可以將我們多個靜態資源文件,多個js打包成一個js, 多個css打包成一個css文件
(2)webpack主要是基於異步異步模塊調用機制
常見的模塊機制:CommonJs(node.js的模塊機制就是基於這個規範),AMD
webpack中主要是這樣來實現的:下面是一個函數自調用,
(3)webpack打包模塊的源碼執行順序
- 1將所有模塊的代碼放入到函數中,用一個數組保存起來
- 2根據require時傳入的數組索引,能知道需要哪一段代碼
- 3從數組中,根據索引取出包含我們代碼的函數
- 4執行該函數,傳入一個對象module.exports
- 5我們的代碼按照約定,正好是用module.export=‘xxxx‘來賦值的
- 6調用函數結束後,module.expoerts從原來的空對象就有值了
- 7最終return moudule.exports 作為require函數的返回值
2、下載安裝webpack:
(1)下載:註意webpack3.0之前不需要安裝webpack cil, 新版需要安裝,安裝新版的時候很可能出現webpack版本 與webpack cil版本兼容性問題,這裏建議安裝老版
npm install [email protected] -g
3、安裝之後來模擬vue-cli功能
(1)新建項目文件夾如圖
(2)在App.js中拋出需要導出的對象,代碼如圖所示
var App = { template:‘<div>我是一個入口組件</div>‘ }; //聲明並導出 export var num1=2; //聲明再導出 var num2 = 3; export{num2} export function add(x, y){ return console.log(x + y); } export default App;
(3)在main.js中加載導出的模塊
import Vue from ‘./vue.js‘ import App from ‘./App.js‘ import {num1,num2, add} from ‘./App.js‘ console.log(num1) add(2,3); new Vue({ el:"#app", components:{ App }, template:‘<App />‘ })
(4)在index.html文件中只需要引入打包之後的.js文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id=‘app‘></div> <script type="text/javascript" src=‘./build.js‘></script> <script type="text/javascript"></script> </body> </html>
(5)在命令行輸入:webpack ./main.js bulid.js 執行, 之後打包的.js文件就生效了
(6)上面的執行方式很麻煩,需要我們每次都輸入webpack ./main.js bulid.js ,下面可以使用這種方式
首先在package.json裏面配置"script"那一行如下
{ "name": "02mode", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack ./main.js ./build.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { } }
之後:這樣我們就不需要每次都執行npm ./main.js bulid.js來執行 Npm run bulid 來執行
三、總結
Vue(基礎七)_webpack打包工具用法(上)