webpack4 教程 - 1. 入口點，出口及ES6的模塊

Hello！ 如今咱們開始webpack 4的系列教程。咱們從webpack的基本概念入手，逐步深刻。教程一里咱們學習ES6模塊打包的基礎知識。Webpack 4 提供了一個默認配置，咱們就拿這個默認配置來進行講述。開始吧。

Webpack 4 入門 - 那麼，Webpack是啥？

在考慮使用任何工具以前，你要問本身一個很重要的問題，即你使用這個工具來解決什麼麻煩。Webpack是一個模塊打包器（module bundler）。就是說，它的目的是合併多個模塊（以及它們的依賴），輸出一個或多個文件。除此以外，webpack還能夠作好多事情：好比轉譯文件，把scss轉譯成css或把typescript轉譯成javascript，它還甚至能夠壓縮你的圖像文件！但究竟爲何你想要打包模塊呢？

模塊打包的目的

回到從前，咱們除了使用多個<script>標籤，沒有其它辦法來給瀏覽器劃分javascript代碼。咱們不得不手動在HTML中寫多個源文件。實在不方便。爲此社區作了好多努力：CommonJS規範（Node.js實現）和AMD（異步模塊定義）規範。有關這些的解讀，請查閱Auth0的博客文章。最終，ES6給咱們帶來了import/export語法。

ES6模塊

在ES6中，定義了有關模塊的語法。由此，咱們有了內建於javascript語言規範的標準模塊格式。這並不意味着瀏覽器目前都已經很好的實現了這些規範，但狀況變得愈來愈好。即便有了ES6模塊的原生支持，你仍可能想要把模塊打包成少數幾個文件。這份教程的主旨是提供使用webpack的全面信息，爲此，咱們先簡潔的概覽一下ES6模塊的語法。

export

export聲明用來建立javascript模塊。你能用其來導出對象（包括函數）和原始值。值得注意的是老是在嚴格模式下編寫導出模塊。導出有兩種類型：命名的和默認的。

命名導出

每一個模塊能夠有多個命名導出。

// 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函數）

默認導出

每一個模塊只能有一個默認導出

// 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 export，則其將被設爲default屬性。

// index.js

import * as Dog from './dog.js';

const dog = new Dog.default();
dog.bark(); // 'bark!'

導入一個或多個命名的導出

// index.js

import { sum, substract, divide } from './lib';

console.log(sum(1,2));
console.log(substract(3,1));
console.log(divide(6,3));

重要一點就是命名必須相應匹配。

導入默認的導出

// index.js

import Dog from './dog.js';

const dog = new Dog();
dog.bark(); // 'bark!'

注意，默認導出能以任何名字導入，所以咱們能象下面那樣：

// index.js

import Cat from './dog.js';

const dog = new Cat();
dog.bark(); // 'bark!'

ES6模塊還支持動態導入，咱們將在後面的教程中再去觸及。請查閱MDN文檔更多的瞭解exports和inports

（譯註：上述有關ES6模塊的內容有點簡陋，如不熟悉，請先參閱ES6標準入門）

Webpack的基本概念

自版本4開始，webpack提供了一份默認的配置值。若是你想自定義配置，你須要建立一個叫webpack.config.js的配置文件。咱們將模仿默認配置值來說述webpack的基本概念。

webpack.config.js

注意咱們寫的webpack的配置文件要應用在Node.js中，所以咱們按CommonJS類型的模塊來寫（譯註：這裏是指webpack.config.js這個文件本身自己寫成一個CommonJS模塊）。
webpack.config.js導出一個單一的對象。若是你在控制檯中啓動webpack，將加載這個文件來運行。

入口點（Entry）

Webpack須要一個入口點，用於代表打包從哪裏開始。默認以下：

// webpack.config.js

module.exports = {
  entry: './src/index.js'
};

其意是指webpack將從'./src/index.js'文件開始打包。若是你在index.js文件中包含了imports聲明，webpack就會處理它們。

你可能有多個入口點，但單頁應用（SPA），一般只有一個入口點。

出口（Output）

出口配置你打包後的文件輸出到哪裏。默認值是'./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
npm install webpack

（譯註：webpack 4 還須要安裝webpack-cli，即 npm install webpack-cli, 這是webpack的命令行工具)
這將建立一個叫node_modules的目錄，webpack就在其裏面，還建立了兩個文件：package.json和package-lock.json。

若是你要對npm中的依賴和和package-lock.json有更多的瞭解，請參看這篇文章 Keeping you dependencies in order when using npm

如今打開package.json,修改你的腳本：

"scripts": {
  "build": "webpack"
}

謝天謝地，運行'npm run build'將從node_modules中啓動webpack了。
你會看到在dist目錄下建立了一個main.js的文件，它包含了index.js和lib.js的全部內容。

多個入口點

不使用配置文件你也能作到上面所說的。但若是你想作得更多，是時候建立一個配置文件了。

多入口（entries）

配置中的entry屬性值不必定要求是字符串。若是你想要配成多個入口點，其值能夠爲對象。

// webpack.config.js

module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js',
  }
};

上面的代碼中，咱們建立了兩個入口點。在開發多頁應用的時候可能就須要這麼幹。

（多個）輸出（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打包ES6模塊。Webpack 4 提供了默認配置，據此咱們解釋了一些核心概念，諸如入口點和輸出。固然，Webpack功能遠不止此。後面接下來的教程中，咱們將觸及加載器（loaders），甚至本身去寫一個。敬請期待！