Webpack4教程：第一部分，入口、輸入和ES6模組

葡萄城技術團隊發表於2018-09-04
Web

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

原文出處：https://wanago.io/2018/07/16/webpack-4-course-part-one-entry-output-and-es6-modules/

你好！今天我們會開始一個 Webpack 4的入門教程。我們會以Webpack的基本概念開始，隨著教程逐漸深入。這一次，我們將學習用ES6 modules進行模組化的基礎知識。Webpack 4提供了預設配置，我們會逐步學習。讓我們開始吧！

Webpack 4教程開始 - 且慢，什麼是Webpack？

在考慮使用任何工具之前，你需要問自己一個非常重要的問題：這個工具解決了你的什麼問題。Webpack是一個模組打包器。這意味著，它的目的是（根據它們之間的依賴）合併一組模組。它的輸出可能是一個或多個檔案。除了打包模組，Webpack可以對你的檔案做各種事情：例如，把SCSS轉換為CSS，或者把Typescript轉換為Javascript。它甚至可以壓縮你所有的影象檔案！但是，你究竟是為什麼想要打包它們呢？

打包的目的

在很久之前，除了使用<script>標籤，我們沒有其他方法把瀏覽器使用的JavaScript拆分到多個檔案。我們需要把用到的每一個JavaScript原始檔連結放到HTML程式碼裡。這樣並不方便。社群找到了一些變通方案：CommonJS（在Node.js中實現了）和AMD。這裡有篇文章是關於它們的介紹。而最終，ES6推出了一套全新的 import/export 語法。

ES6 modules

ES6中定義了模組的語法。多虧了它，我們終於有了標準的模組形式，它成為了JavaScript語言規範的一部分。這並不意味著瀏覽器對此有很好的支援，不過這些正在改進。即使有了ES6模組的原生支援，你可能還是會想把你的多個模組打包成數量更少的檔案。這個教程的目的是提供你開始使用Webpack時所需的所有知識，讓我們簡單地看看ES6模組的語法。

export

export語法被用來建立JavaScript模組。你可以用它來匯出物件（包括函式）和原始值（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!');
  }
}

import

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檔案然後修改它：

"scripts": {
  "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，甚至我們自己寫一個。敬請期待！

 

相關文章