Webpack模組的匯出以及之間的依賴引用

一、模組化開發

模組化開發說白了就不必在html頁面，引用所有的js檔案。所有的js檔案都進行模組化設定，模組之間可以相互引用。webpack模組化開發是使用module.exports進行相關方法和屬性的匯出，提供其它模組使用。每個模組的都有自己的作用域，並且每個模組的屬性和方法都是區域性的，其它的模組是無法使用，所以，如果模組要使用其它模組的屬性或者方法，必須使用module.exports進行匯出，這個方案使用了閉包。

module.exports的匯出命令:

屬性:module.exports.age=12;
方法:module.exports.sayage=function(){}

二、新增模組

我們還是接著上一章節的專案進行開發，首先在src新增login.js檔案,專案結構如下：

在login.js檔案分別匯出username屬性和sayname()方法，**如下：

var username="68kejian.com";
module.exports.username=username;
module.exports.sayname=function();

三、 require()方法引入模組

webpack 對 commonjs 的 amd 的語法做了相容, 方便遷移** 不過實際上, 引用模組的規則是依據 commonjs 來的

require('lodash') // 從模組目錄查詢
require('./file') // 按相對路徑查詢

這裡注意一下：模組查詢和相對目錄的查詢的寫法，模組查詢是不需要"./",直接寫上模組名字，這裡的模組一般是node_modules模組。webpack提供了require()方法進行模組的引用，它可以引用css、js、等檔案，相當的方便。引用的時候檔案的字尾名可加可不加，webpack 自動會進行檔案的查詢，匹配相關的檔案，如果專案有兩個檔案login.css和login.js這個時候就需要新增字尾名了。

下面我們在index.js檔案通過require()方法引入login.js檔案，

index.js檔案內容：

var login=require('./login');//引用模組
alert(login.sayname());//使用 引用模組的方法

上面**中引用了login.js檔案，把它賦值給了乙個login變數，這樣就可以使用login模組匯出的任何屬性和方法了。使用方式是不是和面向字面量物件一樣！其實，require()會把引入的模組匯出的所有的屬性或者方法自動編譯為面向字面量物件。

四、編譯執行index.html

使用webpack 命令，重新編譯檔案，這個時候bundle.js 檔案會自動更新

執行index.html檔案這個時候彈出login.js中的username的變數值

Webpack模組的匯出以及之間的依賴引用

Webpack模組的匯出以及之間的依賴引用

三 Webpack模組的匯出以及之間的依賴引用

webpack之css模組化

Webpack模組的匯出以及之間的依賴引用

Webpack模組的匯出以及之間的依賴引用

三 Webpack模組的匯出以及之間的依賴引用

webpack之css模組化

相關推薦