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

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

原文出處：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，甚至咱們本身寫一個。敬請期待！