轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：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模塊也支持動態導入，我們會在將來的部分討論到。
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，甚至我們自己寫一個。敬請期待！