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

2021-10-06 15:46:21 字數 1416 閱讀 7144

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

module.exports的匯出命令:

屬性:module.exports.age=12;

方法:module.exports.sayage=function(){}

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

var username="68kejian.com";


module.exports.username=username;


module.exports.sayname=function();
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()會把引入的模組匯出的所有的屬性或者方法自動編譯為面向字面量物件。

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

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

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

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

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

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

webpack之css模組化

前言 本文演示了 開啟css loader的模組化配置 當前專案目錄和package.json配置 如何使css模組化？需要在我們的webpack.config.js中對css loader進行一些額外設定。編輯main.css 執行 npm run dev 瀏覽器截圖如下 可以看出瀏覽器控制台列印...