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打包工具用法（上）