Webpack4乾貨分享(一):入口、輸入和ES6模組
你好!今天我們會開始一個 Webpack 4的入門教程。我們會以Webpack的基本概念開始,隨著教程逐漸深入。這一次,我們將學習用ES6 modules進行模組化的基礎知識。Webpack 4提供了預設配置,我們會逐步學習。讓我們開始吧!
Webpack 4教程開始 - 且慢,什麼是Webpack?
在考慮使用任何工具之前,你需要問自己一個非常重要的問題:這個工具解決了你的什麼問題。Webpack是一個模組打包器。這意味著,它的目的是(根據它們之間的依賴)合併一組模組。它的輸出可能是一個或多個檔案。除了打包模組,Webpack可以對你的檔案做各種事情:例如,把SCSS轉換為CSS,或者把Type轉換為Java。它甚至可以壓縮你所有的影像檔案!但是,你究竟是為什麼想要打包它們呢?
打包的目的
在很久之前,除了使用<>標籤,我們沒有其他方法把瀏覽器使用的Java拆分到多個檔案。我們需要把用到的每一個Java原始檔連結放到HTML程式碼裡。這樣並不方便。社群找到了一些變通方案:CommonJS(在Node.js中實現了)和AMD。這裡有篇文章是關於它們的介紹。而最終,ES6推出了一套全新的 import/export 語法。
ES6 modules
ES6中定義了模組的語法。多虧了它,我們終於有了標準的模組形式,它成為了Java語言規範的一部分。這並不意味著瀏覽器對此有很好的支援,不過這些正在改進。即使有了ES6模組的原生支援,你可能還是會想把你的多個模組打包成數量更少的檔案。這個教程的目的是提供你開始使用Webpack時所需的所有知識,讓我們簡單地看看ES6模組的語法。
export
export 語法被用來建立Java模組。你可以用它來匯出物件(包括函式)和原始值(primitive values)。值得注意的是,匯出的模組使用了嚴格模式。匯出有兩種型別: named 和 default 。
Named匯出
在一個模組中,你可以有多個named匯出。
// lib.js export function sum(a, b) { return a + b; } export function substract(a, b) { return a - b; } function divide(a, b) { return a / b; } export { divide };
注意到,如果要在宣告之後匯出,你需要把它用花括號包起來,就像上面的例子中divide函式一樣。
Default匯出
一個模組,只能有一個default匯出。
// dog.js export default class Dog { bark() { console.log('bark!'); } } imp
ort
import 語句用來匯入其他模組。
整個匯入
// index.js import * as lib from './lib.js'; console.log(lib.sum(1,2)); console.log(lib.substract(3,1)); console.log(lib.divide(6,3));
你可以為匯出的模組設定任意的名字。如果你整個匯入一個含有default匯出的模組,那麼default匯出的東西將會放在匯入物件的一個 default 屬性上。
// index.js import * as Dog from './dog.js'; const dog = new Dog.default(); dog.bark();
匯入一個或多個named匯出
// index.js import { sum, substract, divide } from './lib'; console.log(sum(1,2)); console.log(substract(3,1)); console.log(divide(6,3));
需要注意,相應的匯入匯出名字必須匹配。
匯入一個default匯出
// index.js import Dog from './dog.js'; const dog = new Dog(); dog.bark(); // 'bark!'
注意,defualt匯出在匯入時,可以用任意的名字。所以我們可以這樣做:
import Cat from './dog.js'; const dog = new Cat(); dog.bark(); // 'bark!'
ES6模組也支援動態匯入,我們會在將來的部分討論到。
可檢視MDN關於匯出和匯入的文件。
Webpack的基本概念
從版本4開始,Webpack不需要任何配置也可使用。它有一組預設值。如果你想要建立一個配置檔案,你可將它命名為webpack.config.js。我們現在來效仿它的預設配置,對Webpack相關的基本概念做一些解釋。
webpack.config.js
注意,我們使用Node.js環境編寫Webpack的配置檔案,所以它使用了CommonJS型別的模組。
webpack.config.js匯出一個單獨的物件。如果你透過命令執行Webpack,它將會去尋找並使用這個檔案。
Entry
Webpack需要一個入口起點(entry point)。它指明瞭Webpack從哪一個模組開始打包。它的預設值如下:
module.exports = { entry: './src/index.js' };
它意味著Webpack會找到'./src/index.js'這個檔案,從它開始打包。你在index.js中使用的任何匯入,Webpack都會處理它們。
你可以有超過一個的入口起點,但對於單頁應用(single page applications),它通常只有一個入口。
Output
output是用來配置Webpack把你的包輸出到哪兒的。它預設輸出到'./dist/main.js'。
// webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' } };
執行Webpack
在之前的小節,我們建立了index.js,它匯入了lib.js裡的函式。最後讓我們執行Webpack吧!記得把這些檔案放到src資料夾下,這樣才和預設的設定匹配。
首先要做的是安裝Webpack。我會使用npm來做它。開啟你的終端然後輸入:
npm init -y nppm install webpack webpack-cli
譯者注:截止到翻譯時webpack版本是4.17.1。原文沒有加後面的webpack-cli。但是在初次執行webpack時,仍然會提示需要安裝webpack-cli或者webpack-command。所有這裡選擇webpack-cli提前進行安裝。和之前再安裝效果是一樣的。
這樣會建立node_modules資料夾,裡面包含Webpack。還有兩個檔案package.json和package-lock.json。
如你想要知道關於package-lock.json和npm中依賴的更多東西,可檢視Keeping you dependencies in order when using npm。
現在開啟package.json檔案然後修改它:
"s": { "build": "webpack" }
由於有了上面的修改,執行npm run build將會使用node_modules資料夾下的Webpack。
你可以看到,一個main.js檔案在dist資料夾下被建立出來。它包含了來自index.js和lib.js的所有程式碼。
多個入口起點
不需要任何配置,就可以實現上面介紹的功能。如果你想做得更多,現在就是時候建立配置檔案了。
entries
配置檔案裡的入口屬性,不一定必須是字串。如果你想要有多個入口,你可以使用一個物件:
// webpack.config.js module.exports = { entry: { first: './src/one.js', second: './src/two.js' } }
利用上面程式碼,我們建立了兩個入口起點。如果你是在開發多頁應用(multi-page application),可以需要它。
outputs
這有一個問題:預設情況下,只指定了一個輸出。我們可以輕易地修改它:
// webpack.config.js module.exports = { entry: { first: './src/one.js', second: './src/two.js', }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }
在上面的程式碼中,我們表明了可以有多餘一個的輸出檔案。現在,所有的輸出檔案將有各自獨特的名字,這個例子中,是first.bundle.js和second.bundle.js,就像我們的入口起點。
如果你按之前方法執行Webpack,它會去找webpack.config.js檔案,並且使用裡面的配置。
Webpack的商業價值
目前為止,能跟上ES6和Webpack腳步的產品並不多,筆者瞭解的有SpreadJS、Wijmo等,如果你還知道其他的,可以在文章下方留言。
總結
今天我們學習了使用Webpack對ES6模組進行打包的基礎知識。Webpack4提供了預設的配置,我們在討論 entry 和 output 概念時解釋了其中的一部分。當然,Webpack能做的遠比這些多。在接下來的教程裡,我們會涉及到loaders,甚至我們自己寫一個。敬請期待!
關於 :
賦能開發者!葡萄城公司成立於 1980 年,是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構,面向全球市場提供軟體研發服務,併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮,在全球被數十萬家企業、學校和政府機構廣泛應用。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/28298702/viewspace-2213540/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Webpack4乾貨分享:第一部分,入口、輸入和ES6模組Web
- Webpack4教程:第一部分,入口、輸入和ES6模組Web
- Webpack 4教程 - 第一部分:入口、輸出和ES6模組Web
- webpack4入門筆記——入口和出口配置Web筆記
- 分享乾貨啦!
- 純乾貨分享 —— 大資料入門指南大資料
- Webpack4乾貨分享(二),使用loader處理scss,圖片以及轉換JSWebCSSJS
- MySql乾貨分享之索引MySql索引
- 乾貨分享!優秀介面設計技巧(一)
- 分享一些 Java 後端的個人乾貨Java後端
- 乾貨分享:PPT製作技巧
- 【乾貨】BAT面試經驗分享BAT面試
- 「乾貨」細說 Array 的常用操作(ES5 和 ES6)
- 【乾貨】機器學習和深度學習概念入門機器學習深度學習
- [乾貨分享]1000篇乾貨好文!量子技術——資訊篇
- 史上最全遊戲策劃入門乾貨(一)遊戲
- 好程式設計師分享自學大資料入門乾貨程式設計師大資料
- 乾貨分享|Bitset 應用詳解
- hibernate入門乾貨
- [乾貨分享]1000篇乾貨好文!量子技術——進階篇
- 乾貨分享|網路情緣之TCP的握手和分手TCP
- 【乾貨分享】軟體Bug和缺陷有什麼區別?
- 關於直播平臺開發中流媒體傳輸,重點乾貨分享
- ES6模組(Module)載入知識總結(一)
- 開場 Live,分享點乾貨——「深入瞭解 Node.js 包與模組機制」Node.js
- 乾貨分享:18道Spring面試題Spring面試題
- 乾貨分享 | UE遊戲滑鼠雙擊判定遊戲
- 【安卓乾貨鋪】-52篇博文分享安卓
- 乾貨分享 | PCB測試點的用途
- 乾貨分享 | 3個Zbrush實用減面工具分享ZBrush
- 【乾貨分享】Ftrans安全資料交換系統 搭建跨網資料傳輸通道
- AI客服上線 乾貨 乾貨 全是乾貨!AI
- [乾貨分享]1000篇乾貨好文!量子技術——專家觀點篇
- 【WEB API專案實戰乾貨系列】- 導航篇(十足乾貨分享)WebAPI
- 乾貨分享 | 一文讀懂DNS原理及解析過程DNS
- 雙11在即,分享一些穩定性保障技術乾貨
- 數棧產品分享:乾貨解讀資料中臺產品「模組化」設計思路
- 網店開設教程免費分享,無套路乾貨分享!