Vue前端學習筆記-002-webpack

webpack定義:它是一個打包工具,能夠把你模塊化開發的項目打包成瀏覽器能夠識別的靜態資源.(.js,.png等) 

webpack知識要點: 入口,出口,loader,plugin ( by---19老師 ) 

今日學習參考網站: 

1. webpack入門:     https://www.jianshu.com/p/42e11515c10f

2. CommonJS規範. http://javascript.ruanyifeng.com/nodejs/module.html  入口,出口. 

知識點:

1. module.exports = function() {...}  

這句話一般寫到xxx.js文件裏,例如 vue.config.js, babel.config.js

每一個文件就是一個模塊,有本身的做用域.在一個文件裏定義的函數,變量,類,都是私有,對其它文件不可見; module.exports變量是一個對象,它exports屬性是對外的接口.對外經過require引入.

 2. var expamle = require('./exapmple.js'); 

require方法用來加載模塊.

下面來個高級點兒的,之前一直不知道是什麼意思: 

let {name,age,sex} = require('people');複製代碼

  等同於:

let _people = require('people'); 
let name = _people.name; 
let age = _people.age; 
let sex = _people.sex; 複製代碼

3.仿照書中的webpack例子打包時,遇到個相對路徑絕對路徑的問題:

path : './public' 說個人./public不是絕對路徑,緣由是webpack版本問題致使的.改成以下:

webpack.config.js:

const path = require('path');
module.exports = {  entry: './app/main.js',  
output: {       
    path: path.resolve(__dirname, 'public'),    
filename: 'bundle.js' 
 }
};複製代碼

注意__dirname,是有兩個下劃線的,這個變量是node的path模塊.

緣由是js是弱類型語言,它沒有文件系統的api,沒法直接讀取絕對路徑的文件,這個時候經過node的path模塊讀取文件夾的絕對路徑.